<template>
  <div class="page_root" :key="queryUpdateFlag" data-page-name="过程分析表" data-page-identification="b_nnrlndu6gm">
    <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
      <!-- begin vid_okmgm4r31j 自定义模板_05m3ee9ywk -->
      <!--审批详情-->
      <a-modal @cancel="statuState.visible = false" centered :visible="statuState.visible" title="审批详情" :footer="null" :body-style="{ maxHeight: '700px', overflowY: 'auto' }" width="400px">
        <div class="status-item" v-for="(item, index) in statuState.list">
          <div class="title-new-status">
            <div class="left-title"
            >审批类型:<span class="weight-status-new">{{ item.processName }} </span></div
            >
            <div class="right-title"
            >审批提交时间:<span class="weight-status-new">{{ item.createdDate }} </span></div
            >
          </div>
          <a-steps class="status-step" direction="vertical">
            <a-step
              v-for="(inside, index) in item.processTaskList"
              :title="inside.nodeMessage"
              :description="inside.taskName + ':' + inside.assignUserName"
              :status="getIconStatus(inside.nodeStatus)"
            />
          </a-steps>
        </div>
      </a-modal>

      <!--审批详情-->
      <!--         周目标 -->
      <a-modal
        v-model:visible="weekTargetState.weekTargetVisible"
        width="1600px"
        :body-style="{ maxHeight: '680px', overflowY: 'auto', overflowX: 'hidden' }"
        centered
        :footer="null"
        destroy-on-close
        :maskClosable="false"
        class="menu-modal"
      >
        <template #title>
          <div class="custom-header" @contextmenu.prevent="showContextMenu">
            <span class="custom-title">{{ weekTargetState.modalTitle }}</span>
            <div class="context-menu" v-if="titleMenu.visible">
              <a-button type="link" size="smll" @click="handleShowTask">取消隐藏</a-button>
            </div>
          </div>
        </template>
        <div v-for="(target, index) in weekTargetState.targetList" :key="index" class="target-message">
          <div class="target-title" v-if="target.priority == 1">周核心目标：</div>
          <div class="target-title" v-if="target.priority == 2">周目标关键路径：</div>
          <div class="target-title" v-if="target.priority == 3">行动项任务周目标：</div>
          <div class="target-content">
            <a-textarea
              :class="`textarea-${index}`"
              v-if="target.editing"
              :maxlength="1000"
              :rows="3"
              v-model:value="target.weekGoals"
              placeholder="请输入"
              @blur="saveTarget(index)"
              style="width: 1300px"
            />

            <a-tooltip v-else placement="topLeft">
              <template #title>PMO可点击修改任务周目标</template>
              <div
                class="target-span"
                :style="{
                                    width: '1300px',
                                    height: isExpanded(index) ? 'auto' : '32px'
                                }"
                @click="handlerEditTarget(target.value, index)"
              >
                <span v-html="formattedWeekGoals(target.weekGoals) || '--'"></span>
              </div>
            </a-tooltip>

            <a-button @click="toggleExpand(index)" v-if="!target.editing" type="link" style="position: relative; left: 45px">
              {{ isExpanded(index) ? '收起' : '详情' }}
              <template v-if="isExpanded(index)">
                <svg
                  style="position: absolute; right: 0; top: 8px"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="14px"
                  height="14px"
                  viewBox="0 0 14 14"
                  version="1.1"
                >
                  <title>收起</title>
                  <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="项目周情况-全部展示" transform="translate(-1624, -204)">
                      <g id="编组-3" transform="translate(1592, 201)">
                        <g id="收起" transform="translate(32, 3)">
                          <rect id="矩形" x="0" y="0" width="14" height="14" />
                          <g id="编组" transform="translate(1.75, 1.75)" stroke="#3875FF" stroke-linecap="round" stroke-linejoin="round">
                            <polyline id="路径" points="10.5 0 5.25 5.25 0 0" />
                            <polyline id="路径" points="10.5 5.25 5.25 10.5 0 5.25" />
                          </g>
                        </g>
                      </g>
                    </g>
                  </g>
                </svg>
              </template>
              <template v-else>
                <svg
                  style="position: absolute; right: 0; top: 8px"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="14px"
                  height="14px"
                  viewBox="0 0 14 14"
                  version="1.1"
                >
                  <title>详情</title>
                  <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="项目周情况-全部" transform="translate(-1364, -80)">
                      <g id="编组-3" transform="translate(1332, 77)">
                        <g id="展开" transform="translate(39, 10) scale(1, -1) translate(-39, -10)translate(32, 3)">
                          <rect id="矩形" x="0" y="0" width="14" height="14" />
                          <g id="编组" transform="translate(1.75, 1.75)" stroke="#3875FF" stroke-linecap="round" stroke-linejoin="round">
                            <polyline id="路径" points="10.5 0 5.25 5.25 0 0" />
                            <polyline id="路径" points="10.5 5.25 5.25 10.5 0 5.25" />
                          </g>
                        </g>
                      </g>
                    </g>
                  </g>
                </svg>
              </template>
            </a-button>
          </div>
        </div>

        <a-table
          class="target-table-box"
          :scroll="{ x: scrollX, y: '600px' }"
          :columns="weekColumns"
          :data-source="weekTargetState.weekData"
          bordered
          rowKey="id"
          :loading="weekTableLoading"
          :customRow="customClick"
          @resizeColumn="handleResizeColumn"
        >
          <template #bodyCell="{ column, record, index }">
            <!--                      行动项任务名称-->
            <template v-if="column.dataIndex === 'actionTaskName'">
              <div
                class="finishStandard-div"
                :style="{
                                    width: '100%',
                                    height: record.expanded ? 'auto' : '20px',
                                    overflow: 'hidden',
                                    textAlign: record.actionTaskName ? 'left' : 'center'
                                }"
              >{{ record.actionTaskName || '--' }}</div
              >
            </template>
            <!--                      行动项任务名称-->
            <template v-if="column.dataIndex === 'expanded'">
              <div @click="() => toggleExpand1(record)" style="cursor: pointer; color: #3875ff; display: inline-block">
                {{ record.expanded ? '折叠' : '展开' }}
              </div>
              <!--             <div v-if="menuVisible" style="display: inline-block;cursor: pointer; color: #3875ff"> 隐藏</div>-->
            </template>
            <!--                      核心周目标-->
            <template v-if="column.dataIndex === 'coreWeekContent'">
              <template v-if="record.coreWeekEditing">
                <a-textarea ref="coreWeekInput" v-model:value="record.coreWeekContent" @blur="() => handleSave(record, 'coreWeek', 'coreWeekEditing')" />
              </template>
              <template v-else>
                <div
                  class="action-task"
                  :style="{
                                        cursor: 'pointer',
                                        display: 'inline-block',
                                        width: '100%',
                                        height: record.expanded ? 'auto' : '20px',
                                        overflow: 'hidden',
                                        textAlign: record.coreWeekContent ? 'left' : 'center'
                                    }"
                  @click="() => handleEdit(record, 'coreWeekEditing', 'coreWeekInput')"
                  v-html="formattedWeekGoals(record.coreWeekContent) || '--'"
                ></div>
              </template>
            </template>
            <!--                      核心周目标-->
            <!--                      完成标准-->
            <template v-if="column.dataIndex === 'finishStandard'">
              <div
                class="finishStandard-div"
                :style="{
                                    width: '100%',
                                    height: record.expanded ? 'auto' : '20px',
                                    overflow: 'hidden'
                                }"
              >{{ record.finishStandard || '--' }}</div
              >
            </template>
            <!--                      完成标准-->
            <!--                      任务名称-->
            <template v-if="column.dataIndex === 'taskName'">
              <div
                class="finishStandard-div"
                :style="{
                                    width: '100%',
                                    height: record.expanded ? 'auto' : '20px',
                                    overflow: 'hidden'
                                }"
              >{{ record.taskName || '--' }}</div
              >
            </template>
            <!--                      任务名称-->
            <template v-if="column.dataIndex === 'priority'">
              <template v-if="record.priorityEditing">
                <a-select
                  ref="priorityInput"
                  style="width: 100%"
                  v-model:value="record.priority"
                  :options="[
                                        { label: '1', value: '1' },
                                        { label: '2', value: '2' },
                                        { label: '3', value: '3' }
                                    ]"
                  @blur="() => handleSave(record, 'priority', 'priorityEditing')"
                />
              </template>
              <template v-else>
                <div @click="() => handleEdit(record, 'priorityEditing', 'priorityInput')" class="priority-edit">{{ record.priority }}</div>
              </template>
            </template>
            <!-- 时间 -->
            <template v-else-if="column.dataIndex === 'actionTaskStatus'">
              <template v-if="record.statusEditing">
                <a-textarea ref="statusInput" v-model:value="record.actionTaskStatus" @blur="() => handleSave(record, 'status', 'statusEditing')" />
              </template>
              <template v-else>
                <div
                  class="action-task"
                  :style="{
                                        cursor: 'pointer',
                                        display: 'inline-block',
                                        width: '100%',
                                        height: record.expanded ? 'auto' : '20px',
                                        overflow: 'hidden',
                                        position: 'relative',
                                        textAlign: record.actionTaskStatus ? 'left' : 'center'
                                    }"
                  @click="() => handleEditStatus(record, 'statusEditing', 'statusInput')"
                  v-html="formattedWeekGoals(record.actionTaskStatus) || '--'"
                ></div>
              </template>
            </template>
            <!-- 完成情况备注 -->
            <template v-else-if="column.dataIndex === 'finishRemarks'">
              <template v-if="record.finishEditing">
                <a-textarea ref="finishInput" v-model:value="record.finishRemarks" @blur="() => handleSave(record, 'finish', 'finishEditing')" />
              </template>
              <template v-else>
                <div
                  class="finish-mark"
                  :style="{
                                        cursor: 'pointer',
                                        whiteSpace: 'normal',
                                        wordWrap: 'break-word',
                                        minWidth: '130px',
                                        height: record.expanded ? 'auto' : '20px',
                                        overflow: 'hidden',
                                        textAlign: record.finishRemarks ? 'left' : 'center'
                                    }"
                  @click="() => handleEdit(record, 'finishEditing', 'finishInput')"
                  v-html="formattedWeekGoals(record.finishRemarks) || '--'"
                ></div>
              </template>
            </template>
          </template>
        </a-table>

        <!--        <div class="content-menu" v-if="menuVisible" :style="menuStyle"  @click="handleHideTaskTask">-->
        <!--          隐藏-->
        <!--        </div>-->
        <a-menu :style="menuStyle" v-if="menuVisible">
          <a-menu-item @click="handleHideTask">隐藏</a-menu-item>
        </a-menu>
      </a-modal>

      <!--          周目标-->
      <a-modal
        :visible="scoreState.visible"
        title="加减分详情"
        :footer="null"
        width="1000px"
        @cancel="scoreState.visible = false"
        zIndex="1200"
        centered
        :body-style="{ paddingTop: '16px' }"
        :maskClosable="false"
      >
        <div class="score-title-first">
          <ExclamationCircleOutlined style="color: orange; margin-right: 8px" />已结算的任务不支持通过编辑修改是否扣分，请联系相关领导通过员工绩效页面做修正加减分处理
        </div>
        <div class="score-table" v-if="scoreState.type === '项目总监'">
          <div class="score-title"
          >项目总监加减分总和：<span
            :class="[
                                calculateTotalTaskPoints(scoreState.scoreData) >= 0 ? 'score-num' : 'score-num-red'
                            ]"
          >{{ calculateTotalTaskPoints(scoreState.scoreData) }}</span
          >
          </div>

          <div v-for="(item, index) in scoreState.scoreData" :key="index" style="margin-bottom: 17px">
            <div class="score-month"
            >{{ item.month }}月绩效结算明细
              <span class="month-score"
              >月度加减分总和：<span class="default-score">{{ getScore(item.data) }}</span></span
              >
            </div>
            <a-table :scroll="{ x: '700px', y: '200px' }" :columns="labelCoulmn" :dataSource="item.data" bordered :pagination="false" />
          </div>
        </div>
        <div class="score-table" v-if="scoreState.type === '项目经理'">
          <div class="score-title"
          >项目经理加减分总和：<span
            :class="[
                                calculateTotalTaskPoints(scoreState.scoreData) >= 0 ? 'score-num' : 'score-num-red'
                            ]"
          >{{ calculateTotalTaskPoints(scoreState.scoreData) }}</span
          >
          </div>
          <div v-for="(item, index) in scoreState.scoreData" :key="index" style="margin-bottom: 17px">
            <div class="score-month"
            >{{ item.month }}月绩效结算明细
              <span class="month-score"
              >月度加减分总和：<span class="default-score">{{ getScore(item.data) }}</span></span
              >
            </div>
            <a-table :scroll="{ x: '700px', y: '200px' }" :columns="labelCoulmn" :dataSource="item.data" bordered :pagination="false" />
          </div>
        </div>
        <div class="score-table" v-if="scoreState.type === '负责人'">
          <div class="score-title"
          >项目负责人和任务执行人加减分总和：<span
            :class="[
                                calculateTotalTaskPoints(scoreState.scoreData) >= 0 ? 'score-num' : 'score-num-red'
                            ]"
          >{{ calculateTotalTaskPoints(scoreState.scoreData) }}</span
          >
          </div>
          <div v-for="(item, index) in scoreState.scoreData" :key="index" style="margin-bottom: 17px">
            <div class="score-month"
            >{{ item.month }}月绩效结算明细
              <span class="month-score"
              >月度加减分总和：<span class="default-score">{{ getScore(item.data) }}</span></span
              >
            </div>
            <a-table :scroll="{ x: '700px', y: '200px' }" :columns="labelCoulmn" :dataSource="item.data" bordered :pagination="false" />
          </div>
        </div>
      </a-modal>
      <a-modal :visible="actionState.visibleRisk" title="风险" width="80vw" centered destroyOnClose :footer="null" @cancel="actionState.visibleRisk = false" :maskClosable="false">
        <a-table
          class="risk-table"
          bordered
          rowKey="taskId"
          :customRow="customRow"
          :columns="actionState.riskColumns"
          :data-source="actionState.riskList"
          :pagination="false"
          :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'operation'">
              <a-button type="link" :disabled="record.riskState === '关闭'" @click="handlerBeforeClose(record)">关闭</a-button>
            </template>
          </template>
        </a-table>
      </a-modal>
      <div class="search-div" v-if="activeKey !== -1 && activeKey !== -2 && activeKey !== -3">
        <a-form :model="stateK.searchForm" ref="searchRef">
          <a-row :gutter="24" style="height: 32px">
            <a-col :span="4" style="height: 32px; margin-top: 20px">
              <a-form-item label="区域">
                <a-select allow-clear @focus="getAreaList" v-model:value="stateK.searchForm.region" :options="stateK.regionList" />
              </a-form-item>
            </a-col>
            <a-col :span="4" style="margin-top: 20px">
              <a-form-item label="项目阶段">
                <a-select allow-clear @focus="getMilepostList" v-model:value="stateK.searchForm.milepostName" :options="stateK.milepostList" />
              </a-form-item>
            </a-col>
            <a-col :span="4" style="32px;margin-top: 20px">
              <a-form-item label="标签">
                <a-select
                  show-search
                  :filter-option="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                  allow-clear
                  @focus="getLabelList"
                  v-model:value="stateK.searchForm.label"
                  :options="stateK.labelList"
                />
              </a-form-item>
            </a-col>
            <a-col :span="3" style="margin-top: 20px"
            ><a-space><a-button type="primary" @click="getTableList">查询</a-button> <a-button type="default" @click="reset">重置</a-button></a-space></a-col
            >
          </a-row>
        </a-form>
      </div>
      <div class="search-div" v-else>
        <a-form :model="stateNoTemplate.searchForm" ref="searchRef">
          <a-row :gutter="24" style="height: 32px">
            <a-col :span="4" style="height: 32px; margin-top: 20px">
              <a-form-item label="项目名称">
                <a-select
                  :filter-option="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                  show-search
                  allow-clear
                  @focus="getNoTemplateProject"
                  v-model:value="stateNoTemplate.projectName"
                  :options="stateNoTemplate.projectNameList"
                  @change="projectNameChange"
                />
              </a-form-item>
            </a-col>
            <a-col :span="4" style="32px;margin-top: 20px">
              <a-form-item label="项目阶段">
                <a-select
                  show-search
                  :filter-option="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                  allow-clear
                  @focus="getNoTemplateMilepostList"
                  v-model:value="stateNoTemplate.milepostName"
                  :options="stateNoTemplate.milepostList"
                />
              </a-form-item>
            </a-col>

            <a-col :span="3" style="32px;margin-top: 20px"
            ><a-space><a-button type="primary" @click="getNoTemplate">查询</a-button> <a-button type="default" @click="resetNoTemplate">重置</a-button></a-space></a-col
            >
          </a-row>
        </a-form>
      </div>
      <div class="kb-page">
        <a-tabs v-model:activeKey="activeKey" size="large" :tabBarGutter="24" @change="tabChange(activeKey)">
          <a-tab-pane v-for="(item, index) in stateK.templateList" :key="item.templateId" :tab="item.templateName" />
        </a-tabs>
        <div class="table-tip">
          <div class="left-top">
            <div class="finish"><span class="tip-msg">已完成：</span><div class="finish-box"></div></div>
            <div class="running"><span class="tip-msg">进行中：</span><div class="running-box"></div></div>
            <div class="daily"><span class="tip-msg">延期：</span><div class="daily-box"></div></div>
            <div class="daily"><span class="tip-msg">关联行动项任务延期：</span><div class="association-daily-box"></div></div>
            <div class="unstart"><span class="tip-msg">未启动：</span><div class="unstart-box"></div></div>
            <div class="one-click"><div class="one-click-icon"></div><span>单击标签图标添加备注</span></div>
            <div class="hover-click"><div class="hover-click-icon"></div><span>鼠标悬浮标签查看备注</span></div>
            <div class="db-click"><div class="db-click-icon"></div><span>双击任务表格查看详情</span></div>
            <div class="cercle-click"><div class="cercle-click-icon"></div><span>圆标内数字为风险任务数量</span></div>
            <div class="squire-click"><div class="squire-click-icon"></div><span>方标内数字为行动项任务数量</span></div>
          </div>
          <div class="right-top">
            <a-button style="margin: 15px 0" type="primary" @click="handleGetName" v-if="activeKey !== -1 && activeKey !== -2 && activeKey !== -3">
              <template #icon> <EditOutlined /> </template>修改项目简称</a-button
            >
          </div>
        </div>
        <a-spin :spinning="mainLoading.loading" :tip="mainLoading.tip">
          <div class="no-template-main" v-if="activeKey === -1 || activeKey === -2 || activeKey === -3">
            <div class="no-template-content" v-if="noTemplateState.noTemplateData.length == 0">
              <div class="no-img">
                <div class="tip-msg-img">暂无数据</div>
              </div>
            </div>
            <div class="table-item" v-for="(item, index) in noTemplateState.noTemplateData">
              <div class="table-title" @dblclick="showWeekTarget(item, false)"
              >{{ item.name

                }}<div class="action-title-icon" @click="getActionList(item)" v-if="item.actionTaskNumber > 0" @dblclick.stop="">
                  {{ item.actionTaskNumber }}
                </div></div
              >
              <a-table :columns="noTemplateColumns" :data-source="item.data" :pagination="false" bordered :scroll="{ y: '500px' }">
                <template #headerCell="{ column, title }"> </template>
                <template #bodyCell="{ column, record, text }">
                  <template v-if="column.dataIndex === 'taskStatus'">
                    <div class="record-div-orange" v-if="record && record.projectProgressEnum === 'ACTION_TASK_DELAY'" @dblclick="handleGetTask(record)">
                      <div class="risk-num-blue" v-if="record.riskCount" @click="handlerShowRisks(record)">{{ record.riskCount }}</div>
                      <div class="action-num-blue" v-if="record.actionTaskCount" @click="handlerShowAction(record)">{{ record.actionTaskCount }}</div>
                      <div class="task-ower-blue">{{ record.taskOwner }}</div>
                      <div class="icon-hollow" v-if="record.remarks == null" @click.stop="handleRemarks(record)" @dblclick.stop=""></div>
                      <div class="icon-solid" v-if="record.remarks !== null" @click.stop="handleRemarks(record)" @dblclick.stop="">
                        <a-tooltip placement="left">
                          <template #title>{{ record.remarks }}</template>
                          <span class="tool-tip"></span>
                        </a-tooltip>
                      </div>
                    </div>
                    <div class="record-div-white" v-if="record && record.projectProgressEnum === 'UN_START'" @dblclick="handleGetTask(record)">
                      <div class="risk-num-white" v-if="record.riskCount" @click="handlerShowRisks(record)">{{ record.riskCount }}</div>
                      <div class="action-num-white" v-if="record.actionTaskCount" @click="handlerShowAction(record)">{{ record.actionTaskCount }}</div>
                      <div class="task-ower-white">{{ record.taskOwner }}</div>
                      <div class="icon-hollow-deep" v-if="record.remarks == null" @click.stop="handleRemarks(record)" @dblclick.stop=""> </div>

                      <div class="icon-solid-deep" v-else-if="record.remarks !== null" @click.stop="handleRemarks(record)" @dblclick.stop="">
                        <a-tooltip placement="left" :overlayStyle="remarks - tool">
                          <template #title>{{ record.remarks }}</template>
                          <span class="tool-tip"></span>
                        </a-tooltip>
                      </div>
                    </div>
                    <div class="record-div-green" v-if="record && record.projectProgressEnum === 'FINISH'" @dblclick="handleGetTask(record)">
                      <div class="risk-num-green" v-if="record.riskCount" @click="handlerShowRisks(record)">{{ record.riskCount }}</div>
                      <div class="action-num-green" v-if="record.actionTaskCount" @click="handlerShowAction(record)">{{ record.actionTaskCount }}</div>
                      <div class="task-ower-green">{{ record.taskOwner }}</div>
                      <div class="icon-hollow" v-if="record.remarks == null" @click.stop="handleRemarks(record)" @dblclick.stop=""></div>
                      <div class="icon-solid" v-if="record.remarks !== null" @click.stop="handleRemarks(record)" @dblclick.stop="">
                        <a-tooltip placement="left" :overlayStyle="remarks - tool">
                          <template #title>{{ record.remarks }}</template>
                          <span class="tool-tip"></span>
                        </a-tooltip>
                      </div>
                    </div>
                    <div class="record-div-red" v-if="record && record.projectProgressEnum === 'DELAY'" @dblclick="handleGetTask(record)">
                      <div class="risk-num-red" v-if="record.riskCount" @click="handlerShowRisks(record)">{{ record.riskCount }}</div>
                      <div class="action-num-red" v-if="record.actionTaskCount" @click="handlerShowAction(record)">{{ record.actionTaskCount }}</div>
                      <div class="task-ower-red">{{ record.taskOwner }}</div>
                      <div class="icon-hollow" v-if="record.remarks == null" @click.stop="handleRemarks(record)" @dblclick.stop=""></div>
                      <div class="icon-solid" v-if="record.remarks !== null" @click.stop="handleRemarks(record)" @dblclick.stop="">
                        <a-tooltip placement="left" :overlayStyle="remarks - tool">
                          <template #title>{{ record.remarks }}</template>
                          <span class="tool-tip"></span>
                        </a-tooltip>
                      </div>
                    </div>
                    <div class="record-div-blue" v-if="record && record.projectProgressEnum === 'RUNNING'" @dblclick="handleGetTask(record)">
                      <div class="risk-num-blue" v-if="record.riskCount" @click="handlerShowRisks(record)">{{ record.riskCount }}</div>
                      <div class="action-num-blue" v-if="record.actionTaskCount" @click="handlerShowAction(record)">{{ record.actionTaskCount }}</div>
                      <div class="task-ower-blue">{{ record.taskOwner }}</div>
                      <div class="icon-hollow" v-if="record.remarks == null" @click.stop="handleRemarks(record)" @dblclick.stop=""></div>
                      <div class="icon-solid" v-if="record.remarks !== null" @click.stop="handleRemarks(record)" @dblclick.stop="">
                        <a-tooltip placement="left" :overlayStyle="remarks - tool">
                          <template #title>{{ record.remarks }}</template>
                          <span class="tool-tip"></span>
                        </a-tooltip>
                      </div>
                    </div>
                    <div class="record-div-hidden" v-if="record && record.projectProgressEnum === 'HIDDEN'" @click="tipMessage"> </div>
                  </template>
                </template>
              </a-table>
            </div>
          </div>
          <div class="kb-table-box" v-else>
            <a-table
              :columns="stateK.columns"
              :data-source="stateK.dataSource"
              bordered
              :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
              :pagination="false"
              :loading="stateK.tableLoading"
              :scroll="{ x: 'max-content', y: '560px' }"
            >
              <template #headerCell="{ column, title, index }" style="position: relative">
                <template v-if="column.title !== '项目阶段' && column.title !== '任务名称'">
                  <div class="kb-title" @dblclick="showWeekTarget(column, false)"
                  >{{ title }}
                    <div class="kb-title-icon" @click="getActionList(column)" v-if="column.actionTaskNumber > 0">
                      {{ column.actionTaskNumber }}
                    </div>

                    <a-tooltip placement="top">
                      <template #title> 单击查看场景周情况 </template>
                      <div v-if="column.scene" @click="showWeekTarget(column, true)" @dblclick.stop="" class="cj-title-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
                          <title>任务场景</title>
                          <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="过程分析表" transform="translate(-554, -334)">
                              <g id="任务场景" transform="translate(554, 334)">
                                <rect id="矩形" x="0" y="0" width="16" height="16" />
                                <g id="编组" transform="translate(1, 1)" fill="#3875FF" fill-rule="nonzero">
                                  <path
                                    d="M6.363875,12.726875 C6.71543876,12.726875 7.0004375,13.0118737 7.0004375,13.3634375 C7.0004375,13.7150013 6.71543876,14 6.363875,14 L1.273125,14 C0.569997478,14 0,13.4300025 0,12.726875 L0,1.273125 C0,0.56875 0.569625,0 1.273125,0 L12.726875,0 C13.43125,0 14,0.569625 14,1.273125 L14,5.726875 C14,6.07843876 13.7150013,6.3634375 13.3634375,6.3634375 C13.0118737,6.3634375 12.726875,6.07843876 12.726875,5.726875 L12.726875,1.90925 C12.726875,1.55792786 12.4420721,1.273125 12.09075,1.273125 L1.90925,1.273125 C1.55792786,1.273125 1.273125,1.55792786 1.273125,1.90925 L1.273125,12.09075 C1.273125,12.4425 1.5575,12.726875 1.90925,12.726875 L6.363,12.726875 L6.363875,12.726875 Z M2.545375,2.226875 L6.045375,2.226875 C6.22127769,2.226875 6.363875,2.36947231 6.363875,2.545375 L6.363875,6.045375 C6.363875,6.220375 6.22125,6.363875 6.045375,6.363875 L2.545375,6.363875 C2.36947231,6.363875 2.226875,6.22127769 2.226875,6.045375 L2.226875,2.545375 C2.226875,2.36947231 2.36947231,2.226875 2.545375,2.226875 Z M7.954625,2.226875 L11.454625,2.226875 C11.5390965,2.226875 11.6201082,2.26043115 11.6798385,2.32016149 C11.7395688,2.37989183 11.773125,2.46090355 11.773125,2.545375 L11.773125,6.045375 C11.773125,6.12984645 11.7395688,6.21085817 11.6798385,6.27058851 C11.6201082,6.33031885 11.5390965,6.363875 11.454625,6.363875 L7.954625,6.363875 C7.77872231,6.363875 7.636125,6.22127769 7.636125,6.045375 L7.636125,2.545375 C7.636125,2.36947231 7.77872231,2.226875 7.954625,2.226875 L7.954625,2.226875 Z M2.545375,7.636125 L6.045375,7.636125 C6.220375,7.636125 6.363875,7.77875 6.363875,7.954625 L6.363875,11.454625 C6.363875,11.629625 6.22125,11.773125 6.045375,11.773125 L2.545375,11.773125 C2.46090355,11.773125 2.37989183,11.7395688 2.32016149,11.6798385 C2.26043115,11.6201082 2.226875,11.5390965 2.226875,11.454625 L2.226875,7.954625 C2.226875,7.779625 2.3695,7.636125 2.545375,7.636125 L2.545375,7.636125 Z M8.90925,7.636125 L13.363,7.636125 C13.7145638,7.636125 13.9995625,7.92112374 13.9995625,8.2726875 C13.9995625,8.62425126 13.7145638,8.90925 13.363,8.90925 L8.90925,8.90925 C8.55768624,8.90925 8.2726875,8.62425126 8.2726875,8.2726875 C8.2726875,7.92112374 8.55768624,7.636125 8.90925,7.636125 Z M8.90925,10.182375 L13.363,10.182375 C13.7143221,10.182375 13.999125,10.4671779 13.999125,10.8185 C13.999125,11.1698221 13.7143221,11.454625 13.363,11.454625 L8.90925,11.454625 C8.68182812,11.454625 8.47168163,11.3332969 8.35797068,11.1363438 C8.24425974,10.9393906 8.24425974,10.6967344 8.35797068,10.4997812 C8.47168163,10.3028281 8.68182812,10.1815 8.90925,10.1815 L8.90925,10.182375 Z M8.90925,12.726875 L13.363,12.726875 C13.7145638,12.726875 13.9995625,13.0118737 13.9995625,13.3634375 C13.9995625,13.7150013 13.7145638,14 13.363,14 L8.90925,14 C8.55768624,14 8.2726875,13.7150013 8.2726875,13.3634375 C8.2726875,13.0118737 8.55768624,12.726875 8.90925,12.726875 Z"
                                    id="形状"
                                  />
                                </g>
                              </g>
                            </g>
                          </g>
                        </svg>
                      </div>
                    </a-tooltip>
                  </div>
                </template>
              </template>
              <template #bodyCell="{ column, record, text }">
                <template v-if="column.dataIndex === 'taskName'">
                  <div class="task-name">
                    <div
                      v-if="record.mark === '里程碑'"
                      :class="{
                                                'task-milestone': record.mark === '里程碑',
                                                'task-milestone-right': record.mark === '里程碑' && record.critialPath
                                            }"
                    >里程碑</div
                    >
                    <div
                      v-else-if="record.mark === '初验'"
                      :class="{
                                                'task-first': record.mark === '初验',
                                                'task-first-right': record.mark === '初验' && record.critialPath
                                            }"
                    ></div>
                    <div
                      v-else-if="record.mark === '终验'"
                      class="task-over"
                      :class="{
                                                'task-over': record.mark === '终验',
                                                'task-over-right': record.mark === '终验' && record.critialPath
                                            }"
                    ></div>
                    <div v-if="record.critialPath" class="critical-path">关键路径</div>
                    <div
                      :class="{
                                                'is-first':
                                                    (record.mark !== null || record.mark !== '') && !record.critialPath,
                                                'is-first-no':
                                                    (record.mark === null || record.mark === '') && !record.critialPath,
                                                'is-first-path':
                                                    (record.mark !== null || record.mark !== '') && record.critialPath,
                                                'is-first-path-no-mark':
                                                    (record.mark === null || record.mark === '') && record.critialPath
                                            }"
                    >
                      <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff">
                        <template #title>
                          <p style="color: #262626; margin: 0">{{ record.taskIndex }} {{ text }}</p>
                        </template>
                        <span class="task-name-title">{{ record.taskIndex }} {{ text }}</span>
                      </a-tooltip>
                    </div>
                  </div>
                </template>
                <template v-if="column.dataIndex === 'milepostName'">
                  {{ text }}
                </template>
                <div class="record-div-white" v-if="text && text.projectProgressEnum === 'UN_START'" @dblclick="handleGetTask(text)">
                  <div class="risk-num-white" v-if="text.riskCount" @click="handlerShowRisks(text)">{{
                      text.riskCount
                    }}</div>
                  <div class="action-num-white" v-if="text.actionTaskCount" @click="handlerShowAction(text)">{{ text.actionTaskCount }}</div>
                  <div class="task-ower-white">{{ text.taskOwner }}</div>
                  <div class="icon-hollow-deep" v-if="text.remarks == null" @click.stop="handleRemarks(text)" @dblclick.stop=""> </div>

                  <div class="icon-solid-deep" v-else-if="text.remarks !== null" @click.stop="handleRemarks(text)" @dblclick.stop="">
                    <a-tooltip placement="left">
                      <template #title>{{ text.remarks }}</template>
                      <span class="tool-tip"></span>
                    </a-tooltip>
                  </div>
                </div>
                <div class="record-div-green" v-if="text && text.projectProgressEnum === 'FINISH'" @dblclick="handleGetTask(text)">
                  <div class="risk-num-green" v-if="text.riskCount" @click="handlerShowRisks(text)">{{
                      text.riskCount
                    }}</div>
                  <div class="action-num-green" v-if="text.actionTaskCount" @click="handlerShowAction(text)">{{ text.actionTaskCount }}</div>
                  <div class="task-ower-green">{{ text.taskOwner }}</div>
                  <div class="icon-hollow" v-if="text.remarks == null" @click.stop="handleRemarks(text)" @dblclick.stop=""></div>
                  <div class="icon-solid" v-if="text.remarks !== null" @click.stop="handleRemarks(text)" @dblclick.stop="">
                    <a-tooltip placement="left">
                      <template #title>{{ text.remarks }}</template>
                      <span class="tool-tip"></span>
                    </a-tooltip>
                  </div>
                </div>
                <div class="record-div-red" v-if="text && text.projectProgressEnum === 'DELAY'" @dblclick="handleGetTask(text)">
                  <div class="risk-num-red" v-if="text.riskCount" @click="handlerShowRisks(text)">{{
                      text.riskCount
                    }}</div>
                  <div class="action-num-red" v-if="text.actionTaskCount" @click="handlerShowAction(text)">{{ text.actionTaskCount }}</div>
                  <div class="task-ower-red">{{ text.taskOwner }}</div>
                  <div class="icon-hollow" v-if="text.remarks == null" @click.stop="handleRemarks(text)" @dblclick.stop=""></div>
                  <div class="icon-solid" v-if="text.remarks !== null" @click.stop="handleRemarks(text)" @dblclick.stop="">
                    <a-tooltip placement="left">
                      <template #title>{{ text.remarks }}</template>
                      <span class="tool-tip"></span>
                    </a-tooltip>
                  </div>
                </div>
                <div class="record-div-blue" v-if="text && text.projectProgressEnum === 'RUNNING'" @dblclick="handleGetTask(text)">
                  <div class="risk-num-blue" v-if="text.riskCount" @click="handlerShowRisks(text)">{{
                      text.riskCount
                    }}</div>
                  <div class="action-num-blue" v-if="text.actionTaskCount" @click="handlerShowAction(text)">{{ text.actionTaskCount }}</div>
                  <div class="task-ower-blue">{{ text.taskOwner }}</div>
                  <div class="icon-hollow" v-if="text.remarks == null" @click.stop="handleRemarks(text)" @dblclick.stop=""></div>
                  <div class="icon-solid" v-if="text.remarks !== null" @click.stop="handleRemarks(text)" @dblclick.stop="">
                    <a-tooltip placement="left">
                      <template #title>{{ text.remarks }}</template>
                      <span class="tool-tip"></span>
                    </a-tooltip>
                  </div>
                </div>
                <div class="record-div-orange" v-if="text && text.projectProgressEnum === 'ACTION_TASK_DELAY'" @dblclick="handleGetTask(text)">
                  <div class="risk-num-blue" v-if="text.riskCount" @click="handlerShowRisks(text)">{{
                      text.riskCount
                    }}</div>
                  <div class="action-num-blue" v-if="text.actionTaskCount" @click="handlerShowAction(text)">{{ text.actionTaskCount }}</div>
                  <div class="task-ower-blue">{{ text.taskOwner }}</div>
                  <div class="icon-hollow" v-if="text.remarks == null" @click.stop="handleRemarks(text)" @dblclick.stop=""></div>
                  <div class="icon-solid" v-if="text.remarks !== null" @click.stop="handleRemarks(text)" @dblclick.stop="">
                    <a-tooltip placement="left">
                      <template #title>{{ text.remarks }}</template>
                      <span class="tool-tip"></span>
                    </a-tooltip>
                  </div>
                </div>
                <div class="record-div-hidden" v-if="text && text.projectProgressEnum === 'HIDDEN'" @click="tipMessage"> </div>
              </template>
            </a-table>
          </div>
        </a-spin>
      </div>
      <!--          修改项目简称-->
      <a-modal v-model:visible="stateK.editNameVisible" @ok="handleChangeName" title="修改项目简称" width="1000px" centered :maskClosable="false" :body-style="stateK.bodyStyle">
        <a-tabs v-model:activeKey="stateK.activeTab">
          <a-tab-pane v-for="(tab, index) in stateK.editNameModel" :key="tab.id" :tab="tab.name">
            <a-form :model="tab.data" :ref="getFormRef(index)">
              <a-row v-for="(item, index) in tab.data" :key="index" :gutter="24">
                <a-col :span="10">
                  <a-form-item label="项目全称" :rules="[{ required: true, message: '请输入项目全称！', trigger: 'blur' }]" :name="[index, 'projectName']">
                    <a-input v-model:value="item.projectName" disabled />
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item label="项目序号" :rules="[{ required: true, validator: validateNum, trigger: 'blur' }]" :name="[index, 'projectSeqNo']">
                    <a-input-number style="width: 100%" :maxlength="7" show-count v-model:value="item.projectSeqNo" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="项目简称" :rules="{ required: true, validator: validateShortName, trigger: 'blur' }" :name="[index, 'projectShortName']">
                    <a-input v-model:value="item.projectShortName" :maxlength="7" show-count />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </a-tab-pane>
        </a-tabs>
      </a-modal>
      <!--          修改项目简称-->
      <!--          任务详情弹窗-->
      <a-modal v-model:visible="stateK.taskVisible" title="任务详情" :footer="null" width="1000px" centered :maskClosable="false">
        <div class="task-detail">
          <div class="two-line">
            <div class="two-item">
              <div class="two-left">项目总监</div>
              <div class="two-right text-bold">{{ stateK.taskDataSource[0].projectDirector }}</div>
            </div>
            <div class="two-item">
              <div class="two-left">项目经理</div>
              <div class="two-right text-bold">{{ stateK.taskDataSource[0].pmName }}</div>
            </div>
          </div>
          <div class="two-line">
            <div class="two-item">
              <div class="two-left">项目阶段</div>
              <div class="two-right">{{ stateK.taskDataSource[0].milepostName }}</div>
            </div>
            <div class="two-item">
              <div class="two-left">任务名称</div>
              <div class="two-right">
                <a-tooltip>
                  <template #title>{{ stateK.taskDataSource[0].taskName }}</template>
                  <span class="task-name-long">{{ stateK.taskDataSource[0].taskName }}</span>
                </a-tooltip>
              </div>
            </div>
          </div>
          <div class="two-line">
            <div class="two-item">
              <div class="two-left">任务状态</div>
              <div class="two-right">
                <div class="task-status-new" @click="getTaskStatus(stateK.taskDataSource[0].taskId, 0)">
                  <div class="wqd-btn" style="margin-top: 8px; margin-left: 0" v-if="stateK.taskDataSource[0].taskStatus === '未启动'">未启动</div>
                  <div class="jxz-btn" style="margin-top: 8px; margin-left: 0" v-else-if="stateK.taskDataSource[0].taskStatus === '进行中'">进行中</div>
                  <div class="wc-btn" style="margin-top: 8px; margin-left: 0" v-else-if="stateK.taskDataSource[0].taskStatus === '完成'">完成</div>
                  <div class="yq-btn" style="margin-top: 8px; margin-left: 0" v-else-if="stateK.taskDataSource[0].taskStatus === '延期'" color="#F5222D">延期</div>
                  <div class="yqwc-btn" style="margin-top: 8px; margin-left: 0" v-else-if="stateK.taskDataSource[0].taskStatus === '延期完成'" color="#FAAD14">延期完成</div>
                  <div class="spz-btn" style="margin-top: 8px; margin-left: 0" v-else-if="stateK.taskDataSource[0].taskStatus === '审批中'" color="#FAAD14">审批中</div>
                  <div class="wqd-btn" style="margin-top: 8px; margin-left: 0" v-else-if="stateK.taskDataSource[0].taskStatus === '下线'" color="#FAAD14">下线</div>
                  <div v-else>{{ stateK.taskDataSource[0].taskStatus }}</div>
                </div>
              </div>
            </div>
            <div class="two-item">
              <div class="two-left">任务进度</div>
              <div class="two-right">{{ stateK.taskDataSource[0].taskSchedule }}</div>
            </div>
          </div>
          <!--                    <div class="one-line" v-if="activeKey !== -1 && activeKey !== -2 && activeKey !== -3">-->
          <!--                        <div class="one-left">倒计时及加减分</div>-->
          <!--                        <div class="one-right">-->
          <!--                            <div class="count-down-content" style="width: 50%; margin-top: 5px">-->
          <!--                                <a-tooltip-->
          <!--                                    placement="top"-->
          <!--                                    :overlayStyle="standardStyle"-->
          <!--                                    color="#fff"-->
          <!--                                    v-if="-->
          <!--                                        shouldDisplayCountDownWithTooltip(-->
          <!--                                            stateK.taskDataSource[0].labelList,-->
          <!--                                            '倒计时'-->
          <!--                                        )[0]-->
          <!--                                    "-->
          <!--                                >-->
          <!--                                    <template #title>-->
          <!--                                        <div class="count-down-hover">-->
          <!--                                            <p-->
          <!--                                                v-for="(item, index) in stateK.taskDataSource[0].hoverLabelList"-->
          <!--                                                :key="index"-->
          <!--                                                >{{ item }}</p-->
          <!--                                            >-->
          <!--                                        </div>-->
          <!--                                    </template>-->
          <!--                                    <div class="count-down"-->
          <!--                                        >{{-->
          <!--                                            splitStringByColon(-->
          <!--                                                shouldDisplayCountDownWithTooltip(-->
          <!--                                                    stateK.taskDataSource[0].labelList,-->
          <!--                                                    '倒计时'-->
          <!--                                                )[1]-->
          <!--                                            )[0]-->
          <!--                                        }}:<span class="weight-num">{{-->
          <!--                                            splitStringByColon(-->
          <!--                                                shouldDisplayCountDownWithTooltip(-->
          <!--                                                    stateK.taskDataSource[0].labelList,-->
          <!--                                                    '倒计时'-->
          <!--                                                )[1]-->
          <!--                                            )[1]-->
          <!--                                        }}</span></div-->
          <!--                                    >-->
          <!--                                </a-tooltip>-->
          <!--                                <div-->
          <!--                                    v-if="-->
          <!--                                        shouldDisplayCountDownWithTooltip(stateK.taskDataSource[0].labelList, '延期')[0]-->
          <!--                                    "-->
          <!--                                    class="extension-color"-->
          <!--                                >-->
          <!--                                    {{-->
          <!--                                        splitStringByColon(-->
          <!--                                            shouldDisplayCountDownWithTooltip(-->
          <!--                                                stateK.taskDataSource[0].labelList,-->
          <!--                                                '延期'-->
          <!--                                            )[1]-->
          <!--                                        )[0]-->
          <!--                                    }}:<span class="weight-num">{{-->
          <!--                                        splitStringByColon(-->
          <!--                                            shouldDisplayCountDownWithTooltip(-->
          <!--                                                stateK.taskDataSource[0].labelList,-->
          <!--                                                '延期'-->
          <!--                                            )[1]-->
          <!--                                        )[1]-->
          <!--                                    }}</span>-->
          <!--                                </div>-->

          <!--                                <div-->
          <!--                                    v-if="-->
          <!--                                        shouldDisplayCountDownWithTooltip(-->
          <!--                                            stateK.taskDataSource[0].labelList,-->
          <!--                                            '项目经理'-->
          <!--                                        )[0]-->
          <!--                                    "-->
          <!--                                    :class="{-->
          <!--                                        'pm-score-no': hasHyphen(-->
          <!--                                            shouldDisplayCountDownWithTooltip(-->
          <!--                                                stateK.taskDataSource[0].labelList,-->
          <!--                                                '项目经理'-->
          <!--                                            )[1]-->
          <!--                                        ),-->
          <!--                                        'pm-score-yes': hasPlus(-->
          <!--                                            shouldDisplayCountDownWithTooltip(-->
          <!--                                                stateK.taskDataSource[0].labelList,-->
          <!--                                                '项目经理'-->
          <!--                                            )[1]-->
          <!--                                        )-->
          <!--                                    }"-->
          <!--                                    @click="showScore(stateK.taskDataSource[0].pmLabelList, '项目经理')"-->
          <!--                                    >{{-->
          <!--                                        splitStringByColon(-->
          <!--                                            shouldDisplayCountDownWithTooltip(-->
          <!--                                                stateK.taskDataSource[0].labelList,-->
          <!--                                                '项目经理'-->
          <!--                                            )[1]-->
          <!--                                        )[0]-->
          <!--                                    }}:<span class="weight-num">{{-->
          <!--                                        splitStringByColon(-->
          <!--                                            shouldDisplayCountDownWithTooltip(-->
          <!--                                                stateK.taskDataSource[0].labelList,-->
          <!--                                                '项目经理'-->
          <!--                                            )[1]-->
          <!--                                        )[1]-->
          <!--                                    }}</span></div-->
          <!--                                >-->

          <!--                                <div-->
          <!--                                    v-if="-->
          <!--                                        shouldDisplayCountDownWithTooltip(-->
          <!--                                            stateK.taskDataSource[0].labelList,-->
          <!--                                            '任务执行人'-->
          <!--                                        )[0]-->
          <!--                                    "-->
          <!--                                    :class="{-->
          <!--                                        'ower-score-no': hasHyphen(-->
          <!--                                            shouldDisplayCountDownWithTooltip(-->
          <!--                                                stateK.taskDataSource[0].labelList,-->
          <!--                                                '任务执行人'-->
          <!--                                            )[1]-->
          <!--                                        ),-->
          <!--                                        'ower-score-yes': hasPlus(-->
          <!--                                            shouldDisplayCountDownWithTooltip(-->
          <!--                                                stateK.taskDataSource[0].labelList,-->
          <!--                                                '任务执行人'-->
          <!--                                            )[1]-->
          <!--                                        )-->
          <!--                                    }"-->
          <!--                                    @click="showScore(stateK.taskDataSource[0].taskOwnerLabelList, '负责人')"-->
          <!--                                    >{{-->
          <!--                                        splitStringByColon(-->
          <!--                                            shouldDisplayCountDownWithTooltip(-->
          <!--                                                stateK.taskDataSource[0].labelList,-->
          <!--                                                '任务执行人'-->
          <!--                                            )[1]-->
          <!--                                        )[0]-->
          <!--                                    }}:<span class="weight-num">{{-->
          <!--                                        splitStringByColon(-->
          <!--                                            shouldDisplayCountDownWithTooltip(-->
          <!--                                                stateK.taskDataSource[0].labelList,-->
          <!--                                                '任务执行人'-->
          <!--                                            )[1]-->
          <!--                                        )[1]-->
          <!--                                    }}</span></div-->
          <!--                                >-->

          <!--                                <div-->
          <!--                                    v-if="-->
          <!--                                        shouldDisplayCountDownWithTooltip(-->
          <!--                                            stateK.taskDataSource[0].labelList,-->
          <!--                                            '项目总监'-->
          <!--                                        )[0]-->
          <!--                                    "-->
          <!--                                    :class="{-->
          <!--                                        'all-group-no': hasHyphen(-->
          <!--                                            shouldDisplayCountDownWithTooltip(-->
          <!--                                                stateK.taskDataSource[0].labelList,-->
          <!--                                                '项目总监'-->
          <!--                                            )[1]-->
          <!--                                        ),-->
          <!--                                        'all-group-yes': hasPlus(-->
          <!--                                            shouldDisplayCountDownWithTooltip(-->
          <!--                                                stateK.taskDataSource[0].labelList,-->
          <!--                                                '项目总监'-->
          <!--                                            )[1]-->
          <!--                                        )-->
          <!--                                    }"-->
          <!--                                    @click="showScore(stateK.taskDataSource[0].projectDirectorLabelList, '项目总监')"-->
          <!--                                    >{{-->
          <!--                                        splitStringByColon(-->
          <!--                                            shouldDisplayCountDownWithTooltip(-->
          <!--                                                stateK.taskDataSource[0].labelList,-->
          <!--                                                '项目总监'-->
          <!--                                            )[1]-->
          <!--                                        )[0]-->
          <!--                                    }}:<span class="weight-num">{{-->
          <!--                                        splitStringByColon(-->
          <!--                                            shouldDisplayCountDownWithTooltip(-->
          <!--                                                stateK.taskDataSource[0].labelList,-->
          <!--                                                '项目总监'-->
          <!--                                            )[1]-->
          <!--                                        )[1]-->
          <!--                                    }}</span></div-->
          <!--                                >-->
          <!--                            </div>-->
          <!--                        </div>-->
          <!--                    </div>-->
          <div class="one-line" v-if="activeKey !== -1 && activeKey !== -2 && activeKey !== -3">
            <div class="one-left">完成标准</div>
            <div class="one-right">
              <p style="color: #262626; margin: 0" v-for="(item, index) in handlerGetSpace(stateK.taskDataSource[0].finishStandard)" :key="index">{{ item }}</p>
            </div>
          </div>
          <div class="one-line" v-if="activeKey !== -1 && activeKey !== -2 && activeKey !== -3">
            <div class="one-left">审核标准及注意事项</div>
            <div class="one-right">
              <p style="color: #262626; margin: 0" v-for="(item, index) in handlerGetSpace(stateK.taskDataSource[0].assessorStandard)" :key="index">{{ item }}</p>
            </div>
          </div>
          <div class="one-line" v-if="activeKey !== -1 && activeKey !== -2 && activeKey !== -3">
            <div class="one-left">SOP</div>
            <div class="one-right">
              <p class="task-dependency">{{ stateK.taskDataSource[0].taskDependency }}</p>
            </div>
          </div>
          <div class="one-line" v-if="activeKey !== -1 && activeKey !== -2 && activeKey !== -3">
            <div class="one-left">甲方工作事项</div>
            <div class="one-right">
              <p style="color: #262626; margin: 0" v-for="(item, index) in handlerGetSpace(stateK.taskDataSource[0].taskRemarks)" :key="index">{{ item }}</p>
            </div>
          </div>
          <div class="one-line" v-if="activeKey !== -1 && activeKey !== -2 && activeKey !== -3">
            <div class="one-left">附件模板</div>
            <div class="one-right">
              <a
                v-for="(item, index) in stateK.taskDataSource[0].attachmentTemplateList"
                :key="index"
                href="javascript:"
                @click="attachmentTemplateDownLoad(item)"
                :class="[
                                    'block',
                                    index > 2 && !stateK.taskDataSource[0].attachmentShowAll ? 'hide' : ''
                                ]"
              >
                {{ item.name }}
              </a>
            </div>
          </div>
          <div class="one-line">
            <div class="one-left">附件</div>
            <div class="one-right">
              <a
                v-for="(item, index) in stateK.taskDataSource[0].ppmEnclosureInfoList"
                :key="index"
                href="javascript:"
                @click="handlerDownload(item)"
                :class="[
                                    'block',
                                    index > 2 && !stateK.taskDataSource[0].attachmentShowAll ? 'hide' : ''
                                ]"
              >
                {{ item.name }}
              </a>
            </div>
          </div>
          <div class="two-line">
            <div class="two-item">
              <div class="two-left">任务负责人</div>
              <div class="two-right">{{ stateK.taskDataSource[0].taskOwner }}</div>
            </div>
            <div class="two-item">
              <div class="two-left">审核员</div>
              <div class="two-right">{{ stateK.taskDataSource[0].assessorName }}</div>
            </div>
          </div>
          <div class="one-line">
            <div class="one-left">任务执行人</div>
            <div class="one-right">
              {{ stateK.taskDataSource[0].taskParticipantStr }}
            </div>
          </div>
          <div class="two-line">
            <div class="two-item">
              <div class="two-left">计划开始</div>
              <div class="two-right">{{ stateK.taskDataSource[0].startTime }}</div>
            </div>
            <div class="two-item">
              <div class="two-left">实际开始</div>
              <div class="two-right">{{ stateK.taskDataSource[0].actualStarTime }}</div>
            </div>
          </div>
          <div class="two-line">
            <div class="two-item">
              <div class="two-left">计划完成</div>
              <div class="two-right">{{ stateK.taskDataSource[0].endTime }}</div>
            </div>
            <div class="two-item">
              <div class="two-left">实际完成</div>
              <div class="two-right">{{ stateK.taskDataSource[0].taskFinishTime }}</div>
            </div>
          </div>
          <div class="two-line">
            <div class="two-item">
              <div class="two-left">计划工时（小时）</div>
              <div class="two-right">{{ stateK.taskDataSource[0].workingHours }}</div>
            </div>
            <div class="two-item">
              <div class="two-left">实际工时（小时）</div>
              <div class="two-right">{{ stateK.taskDataSource[0].actualWorkHours }}</div>
            </div>
          </div>
          <div class="two-line">
            <div class="two-item">
              <div class="two-left">工时投入状态</div>
              <div class="two-right">{{ stateK.taskDataSource[0].stateInput }}</div>
            </div>
            <div class="two-item">
              <div class="two-left">审批状态</div>
              <div class="two-right">{{ stateK.taskDataSource[0].approvalStatus }}</div>
            </div>
          </div>
          <div class="two-line">
            <div class="two-item">
              <div class="two-left">优先级</div>
              <div class="two-right">{{ stateK.taskDataSource[0].priorityStr }}</div>
            </div>
            <div class="two-item">
              <div class="two-left">未关闭风险数量</div>

              <div class="two-right risk-num">
                <span @click="handlerShowRisks(current)">{{
                    stateK.taskDataSource[0].unclosedRiskNumber
                  }}</span>
              </div>
            </div>
          </div>
          <div class="two-line">
            <div class="two-item">
              <div class="two-left">行动项任务数</div>
              <div class="two-right risk-num" @click="handlerShowAction(current)">{{
                  stateK.taskDataSource[0].actionTaskCount
                }}</div>
            </div>
            <div class="two-item">
              <div class="two-left"></div>

              <div class="two-right risk-num"> </div>
            </div>
          </div>
        </div>
      </a-modal>
      <!--          任务详情弹窗-->
      <!--          风险弹窗-->
      <a-modal :visible="stateK.visibleRisk" title="风险" width="80vw" centered destroyOnClose :footer="null" @cancel="stateK.visibleRisk = false" :maskClosable="false">
        <div class="default-table">
          <a-table
            bordered
            rowKey="taskId"
            :customRow="customRow"
            :columns="riskColumns"
            :data-source="stateK.riskList"
            :pagination="false"
            :scroll="{ y: '80vw' }"
            :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'operation'">
                <a-button type="link" :disabled="record.riskState === '关闭'" @click="handlerBeforeClose(record)"> 关闭 </a-button>
              </template>
            </template>
          </a-table>
        </div>
      </a-modal>
      <!--          风险-->
      <!--          备注-->
      <a-modal centered v-model:visible="stateK.remarksVisible" title="添加备注" @ok="handleCreateRemarsk" :maskClosable="false">
        <a-textarea v-model:value="stateK.remarks" placeholder="请输入备注" :maxlength="1000" :rows="4" show-count />
      </a-modal>
      <!--          备注-->
      <!--      行动项-->
      <a-modal
        :visible="stateK.visibleAction"
        title="行动项任务"
        width="80vw"
        centered
        class="xdx-table"
        destroyOnClose
        :footer="null"
        @cancel="stateK.visibleAction = false"
        :body-style="{ maxHeight: '600px', overflowY: 'auto' }"
        :maskClosable="false"
      >
        <div class="action-select">
          <a-form-item label="任务状态" style="height: 30px">
            <a-select
              :max-tag-count="3"
              v-model:value="stateK.selectActionStatus"
              mode="multiple"
              allow-clear
              :options="[
                                { label: '未启动', value: '未启动' },
                                { label: '进行中', value: '进行中' },
                                { label: '审批中', value: '审批中' },
                                { label: '延期', value: '延期' },
                                { label: '完成', value: '完成' },
                                { label: '延期完成', value: '延期完成' }
                            ]"
              style="width: 350px; margin-bottom: 12px"
              @change="getActionList(currentColumn, stateK.selectActionStatus)"
            />
          </a-form-item>
        </div>
        <div class="default-table">
          <a-table
            bordered
            rowKey="taskId"
            :columns="ActionColumns"
            :data-source="stateK.actionList"
            :pagination="false"
            :scroll="{ y: '450px' }"
            :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
          >
            <template #bodyCell="{ column, record, text }">
              <template v-if="column.dataIndex === 'taskStatusOnOrOff'">
                <a-switch :checked="record['taskStatusOnOrOff']" :disabled="record.nodeType === 'MENU' || !actionState.projectManager" @click="changeTaskStatusOnOrOff(record)" />
              </template>
              <!--                                新-任务进度-->
              <template v-if="column.dataIndex === 'taskSchedule'">
                <a-progress
                  :percent="record.taskSchedule"
                  status="active"
                  @click="
                                        changeTaskSchedule(
                                            record.finishPermission,
                                            record.taskSchedule,
                                            record.taskId,
                                            record.taskStatus
                                        )
                                    "
                />
              </template>
              <!--                                end新-任务进度-->
              <!-- 新-审核标准字段 -->
              <template v-if="column.dataIndex === 'assessorStandard'">
                <a-tooltip @mouseenter="handlerGetStandard(record)" placement="top" :overlayStyle="standardStyle" color="#fff">
                  <template #title>
                    <p style="color: #262626; margin: 0" v-for="(item, index) in actionState.standardList" :key="index">{{ item }}</p>
                  </template>
                  <div
                    style="
                                            min-width: 70px;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                            overflow: hidden;
                                        "
                  >{{ text }}</div
                  >
                </a-tooltip>
              </template>
              <!-- 审核标准 -->
              <template v-if="column.dataIndex === 'unclosedRiskNumber' || column.dataIndex === 'riskNumber'">
                <a
                  @click="
                                        handlerActionShowRisks(
                                            record.actionTaskId,
                                            column.dataIndex === 'unclosedRiskNumber' ? '未关闭' : '全部'
                                        )
                                    "
                >
                  {{ text }}
                </a>
              </template>
              <!-- 附件模板 -->

              <template v-if="column.dataIndex === 'attachmentTemplate'">
                <!--                                  预览/下载-->
                <div v-for="(item, index) in record.attachmentTemplateList" :key="index">
                  <a-dropdown>
                    <span
                      style="
                                                overflow: hidden;
                                                white-space: nowrap;
                                                text-overflow: ellipsis;
                                                display: block;
                                            "
                      :title="item.name"
                    >
                      {{ item.name }}
                    </span>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item>
                          <a-button style="width: 100%" type="link" size="small" :disabled="!item.type.startsWith('image')" @click="previewAttachment(item)">预览</a-button>
                        </a-menu-item>
                        <a-menu-item>
                          <a-button style="width: 100%" type="link" size="small" @click="attachmentTemplateDownLoad(item)">下载</a-button>
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </div>
                <!--                                  预览/下载-->
              </template>
              <template v-if="column.dataIndex === 'milepostName'">
                {{ text }}
              </template>
              <!-- 倒计时 -->
              <template v-if="column.dataIndex === 'countDown'">
                <div class="count-down-content">
                  <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff" v-if="shouldDisplayCountDownWithTooltip(record.labelList, '倒计时')[0]">
                    <template #title>
                      <div class="count-down-hover">
                        <p v-for="(item, index) in record.hoverLabelList" :key="index">{{
                            item
                          }}</p>
                      </div>
                    </template>
                    <div class="count-down"
                    >{{
                        splitStringByColon(
                          shouldDisplayCountDownWithTooltip(record.labelList, '倒计时')[1]
                        )[0]

                      }}:<span class="weight-num">{{
                          splitStringByColon(
                            shouldDisplayCountDownWithTooltip(record.labelList, '倒计时')[1]
                          )[1]
                        }}</span></div
                    >
                  </a-tooltip>
                  <div v-if="shouldDisplayCountDownWithTooltip(record.labelList, '延期')[0]" class="extension-color">
                    {{
                      splitStringByColon(
                        shouldDisplayCountDownWithTooltip(record.labelList, '延期')[1]
                      )[0]

                    }}:<span class="weight-num">{{
                      splitStringByColon(
                        shouldDisplayCountDownWithTooltip(record.labelList, '延期')[1]
                      )[1]
                    }}</span>
                  </div>

                  <div
                    v-if="shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[0]"
                    :class="{
                                            'all-group-no': hasHyphen(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                                            ),
                                            'all-group-yes': hasPlus(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                                            )
                                        }"
                    @click="showScore(record.projectDirectorLabelList, '项目总监')"
                  >{{
                      splitStringByColon(
                        shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                      )[0]

                    }}:<span class="weight-num">{{
                        splitStringByColon(
                          shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                        )[1]
                      }}</span></div
                  >

                  <div
                    v-if="shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[0]"
                    :class="{
                                            'pm-score-no': hasHyphen(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                                            ),
                                            'pm-score-yes': hasPlus(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                                            )
                                        }"
                    @click="showScore(record.pmLabelList, '项目经理')"
                  >{{
                      splitStringByColon(
                        shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                      )[0]

                    }}:<span class="weight-num">{{
                        splitStringByColon(
                          shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                        )[1]
                      }}</span></div
                  >

                  <div
                    v-if="shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[0]"
                    :class="{
                                            'ower-score-no': hasHyphen(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                                            ),
                                            'ower-score-yes': hasPlus(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                                            )
                                        }"
                    @click="showScore(record.taskOwnerLabelList, '负责人')"
                  >{{
                      splitStringByColon(
                        shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                      )[0]

                    }}:<span class="weight-num">{{
                        splitStringByColon(
                          shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                        )[1]
                      }}</span></div
                  >
                </div>
              </template>
              <!-- 倒计时 -->
              <template v-if="column.dataIndex === 'taskStatus'">
                <div class="task-status-new" @click="getTaskStatus(record.actionTaskId, 1)">
                  <div class="wqd-btn" v-if="text === '未启动'">未启动</div>
                  <div class="jxz-btn" v-else-if="text === '进行中'">进行中</div>
                  <div class="wc-btn" v-else-if="text === '完成'">完成</div>
                  <div class="yq-btn" v-else-if="text === '延期'" color="#F5222D">延期</div>
                  <div class="yqwc-btn" v-else-if="text === '延期完成'" color="#FAAD14">延期完成</div>
                  <div class="spz-btn" v-else-if="text === '审批中'" color="#FAAD14">审批中</div>
                  <div class="wqd-btn" v-else-if="text === '下线'" color="#FAAD14">下线</div>
                  <div v-else>{{ text }}</div>
                </div>
              </template>
              <template v-if="column.dataIndex === 'attachment'">
                <!--                                  预览/下载-->
                <div v-for="(item, index) in record.ppmEnclosureInfoList" :key="index">
                  <a-dropdown>
                    <span
                      style="
                                                overflow: hidden;
                                                white-space: nowrap;
                                                text-overflow: ellipsis;
                                                display: block;
                                            "
                      :title="item.name"
                    >
                      {{ item.name }}
                    </span>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item>
                          <a-button style="width: 100%" type="link" size="small" :disabled="!item.type.startsWith('image')" @click="previewAttachment(item)">预览</a-button>
                        </a-menu-item>
                        <a-menu-item>
                          <a-button style="width: 100%" type="link" size="small" @click="handlerDownload(item)">下载</a-button>
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </div>
                <!--                                  预览/下载-->
              </template>
              <template v-if="column.dataIndex === 'operation'">
                <a-button size="small" v-if="record.taskStatus === '未启动'" type="link" @click="handleActionStart(record)"> 开始 </a-button>
                <a-button size="small" v-else type="link" @click="actionBeforeOk(record)"> 完成 </a-button>
                <a-divider style="margin: 0; border-color: #3875ff" type="vertical" />
                <a-button size="small" type="link" :disabled="record.disabledEditBtn" @click="handlerEditAction(record)"> 编辑 </a-button>
                <a-divider style="margin: 0; border-color: #3875ff" type="vertical" />
                <a-popconfirm title="确定要删除吗？" :disabled="record.disabledDelBtn" @confirm="handlerDeleteAction(record)">
                  <a-button size="small" :disabled="record.disabledDelBtn" type="link">删除</a-button>
                </a-popconfirm>
                <a-divider style="margin: 0; border-color: #3875ff" type="vertical" />
                <a-button size="small" type="link" :disabled="record.disabledNoteBtn" @click="handlerShowActionNotes(record)"> 历史备注 </a-button>
              </template>
            </template>
          </a-table>
        </div>
      </a-modal>
      <!--      行动项-->
      <!-- end vid_okmgm4r31j 自定义模板_05m3ee9ywk -->
    </a-spin>
  </div>
</template>
<script setup lang="tsx">
import {
  h, ref, reactive, toRaw, markRaw, watch, computed,
  onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
} from "vue";
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
import { cloneDeep, localGet, merge, getDifferenceArray, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission, getComponentParamsValue } from '@/utils/index';
import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
import dayjs from 'dayjs';
import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
import { message, notification, Modal } from 'ant-design-vue'
import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate, parseSubFromDataList } from '@/utils/format';
import colorTheme from '@/design/custom-theme.json';
/*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/



  // 获取传入的流程ID和组件参数
const props = defineProps({
    'processInstanceId': {
      type: [String,Number,Boolean],
      default: undefined,
    },
  })
const immediateWatch = (source, callback) => {
  watch(source, callback, {deep: true,immediate: true })
}



/* -------------------------- 属性定义 -------------------------- */

const setTimeOutList = [];
const pageLoading = reactive({
  loading: false,
  tip: undefined
});
const authInfo = localGet('app-user-store');




// 处理校验
const setSubFormName =(parentInfo, name)=>{
  return [parentInfo.parents, parentInfo.cycleIndex, name];
}


/* ========================== 属性定义 ========================== */


/* -------------------------- 元素数据引用 -------------------------- */


/* ========================== 元素数据引用 ========================== */


/* -------------------------- 页面数据 -------------------------- */


/* ========================== 页面数据 ========================== */



/* -------------------------- 响应 -------------------------- */

/* ========================== 响应 ========================== */


/* -------------------------- 函数 -------------------------- */

/* ========================== 函数 ========================== */


/* -------------------------- 页面参数 -------------------------- */

const pageParameter_state = reactive({
  'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
})

/* ========================== 页面参数 ========================== */


/* -------------------------- 组件事件处理方法 -------------------------- */

// ---------------------------- 组件数据同步 ----------------------------

// ============================ 组件数据同步 ============================


/* ========================== 组件事件处理方法 ========================== */


/* -------------------------- 生命周期 -------------------------- */
// 用于参数变更后重新执行自定义指令
const queryUpdateFlag = ref(0);
onMounted(() => { ;

});

onUnmounted(() => {
  // 销毁定时器
  setTimeOutList.forEach(({ repeat, timer }) => {
    repeat ?  clearInterval(timer): clearTimeout(timer);
  });
});

/* ========================== 生命周期 ========================== */


/* -------------------------- 数据关联处理 -------------------------- */





/* -------------------------- 表单数据同步 -------------------------- */
/* ========================== 表单数据同步 ========================== */

/* ========================== 数据关联处理 ========================== */


/* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

/* ========================== 不同组件自定义的处理逻辑 ========================== */


// ================================定制化逻辑========================================
import { nextTick } from 'vue'

const activeKey = ref(null)
const stateK = reactive({
  templateList: [],
  standardList: [],
  tableLoading: false,
  searchForm: {
    region: undefined,
    milepostName: undefined,
    taskStatus: undefined,
    time: undefined,
    label: undefined
  },
  regionList: [],
  milepostList: [],
  labelList: [],
  columns: [
    {
      title: '项目阶段',
      dataIndex: 'milepostName',
      fixed: 'left',
      align: 'center',
      width: '120px',
      ellipsis: true,
      customCell: item => {
        const { rowIndex, rowSpan } = item
        return {
          rowSpan: rowSpan,
          style: {
            fontSize: '16px',
            color: '#262626',
            fontWeight: '600',
            // borderTop: rowIndex ? '2px solid #C2C4C9' : 'none',
            backgroundColor: '#F7FAFF'
          }
        }
      }
    },
    {
      title: '任务名称',
      dataIndex: 'taskName',
      width: '220px',
      ellipsis: true,
      align: 'center',
      fixed: 'left',
      customCell: ({ rowSpan, rowIndex, border }) => {
        return {
          style: {
            backgroundColor: '#F7FAFF',
            padding: '0 10px'
          }
        }
      }
    }
  ],
  dataSource: [],
  editNameVisible: false,
  // editNameActiveKey: '0',
  editNameModel: [],
  // 任务详情列表
  taskDataSource: [],
  taskVisible: false,
  riskList: [],
  actionList: [],
  selectActionStatus: ['未启动', '进行中', '审批中', '延期'],
  visibleRisk: false,
  visibleAction: false,
  remarksVisible: false,
  remarks: undefined,
  activeTab: '',
  bodyStyle: {
    padding: '0 24px 0px 24px',
    height: '800px',
    overflow: 'auto'
  }
})
const current = ref({})
const riskColumns = [
  {
    title: '风险描述',
    dataIndex: 'riskDescription',
    width: '170px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },
  { title: '解决方案', dataIndex: 'solution', align: 'center' },
  { title: '风险状态', dataIndex: 'riskState', align: 'center' },
  { title: '提交人', dataIndex: 'reportedBy', align: 'center' },
  { title: '提交时间', dataIndex: 'dailyDate', align: 'center' },
  { title: '解决人', dataIndex: 'closeRiskPerson', align: 'center' },
  { title: '风险关闭备注', dataIndex: 'riskRemarks', align: 'center' }
]
const ActionColumns = [
  {
    title: '行动项任务名称',
    dataIndex: 'actionTaskName',
    ellipsis: true,
    resizable: true,
    width: '220px',
    align: 'center'
  },
  {
    title: '任务状态',
    dataIndex: 'taskStatus',
    resizable: true,
    ellipsis: false,
    width: '140px',
    align: 'center'
  },
  {
    title: '任务进度',
    dataIndex: 'taskSchedule',
    resizable: true,
    ellipsis: false,
    width: '140px',
    align: 'center'
  },
  {
    title: '倒计时及加减分',
    dataIndex: 'countDown',
    resizable: true,
    ellipsis: false,
    width: '250px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px'
        }
      }
    }
  },
  {
    title: '附件',
    dataIndex: 'attachment',
    resizable: true,
    ellipsis: true,
    width: '200px',
    align: 'center'
  },
  {
    title: '未关闭风险数量',
    dataIndex: 'unclosedRiskNumber',
    resizable: true,
    ellipsis: true,
    width: '200px',
    align: 'center'
  },
  {
    title: '任务负责人',
    dataIndex: 'taskOwner',
    resizable: true,
    ellipsis: true,
    width: '140px',
    align: 'center'
  },
  {
    title: '审核员',
    dataIndex: 'assessorName',
    resizable: true,
    ellipsis: true,
    width: '140px',
    align: 'center'
  },
  {
    title: 'PMO',
    dataIndex: 'projectManagementOffice',
    resizable: true,
    ellipsis: true,
    width: '140px',
    align: 'center'
  },
  {
    title: '任务执行人',
    resizable: true,
    dataIndex: 'taskParticipantStr',
    ellipsis: true,
    width: '140px',
    align: 'center'
  },
  {
    title: '计划开始',
    dataIndex: 'startTime',
    resizable: true,
    ellipsis: true,
    width: '140px',
    align: 'center'
  },
  {
    title: '实际开始',
    dataIndex: 'examPassTime',
    resizable: true,
    ellipsis: true,
    width: '140px',
    align: 'center'
  },
  {
    title: '计划完成',
    dataIndex: 'endTime',
    ellipsis: true,
    width: '120px',
    resizable: true,
    align: 'center'
  },
  {
    title: '	实际完成',
    dataIndex: 'taskFinishTime',
    ellipsis: true,
    resizable: true,
    width: '120px',
    align: 'center'
  },
  {
    title: '计划工时(小时)',
    dataIndex: 'workingHours',
    resizable: true,
    ellipsis: true,
    width: '130px',
    align: 'center'
  },
  {
    title: '实际工时(小时)',
    dataIndex: 'actualWorkHours',
    resizable: true,
    ellipsis: true,
    width: '130px',
    align: 'center'
  },
  {
    title: '工时投入状态',
    dataIndex: 'stateInput',
    resizable: true,
    ellipsis: true,
    width: '120px',
    align: 'center'
  }
]
const taskColumns = [
  {
    title: '项目阶段',
    dataIndex: 'milepostName',

    ellipsis: true,
    width: '140px',
    fixed: 'left',
    align: 'left',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },

  {
    title: '任务名称',
    dataIndex: 'taskName',
    ellipsis: true,

    width: '220px',
    fixed: 'left',
    align: 'left',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },
  {
    title: '任务状态',
    dataIndex: 'taskStatus',

    ellipsis: false,
    width: '140px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },
  {
    title: '任务进度',
    dataIndex: 'taskSchedule',

    ellipsis: false,
    width: '140px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },
  {
    title: '倒计时及加减分',
    dataIndex: 'countDown',

    ellipsis: false,
    width: '210px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px'
        }
      }
    }
  },
  {
    title: '未关闭风险数量',
    dataIndex: 'unclosedRiskNumber',

    ellipsis: true,
    width: '150px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },
  // 新-模板项目完成标准字段
  {
    title: '完成标准',
    dataIndex: 'finishStandard',

    ellipsis: true,
    width: '200px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },
  // 新-模板项目审核标准字段
  {
    title: '审核标准及注意事项',
    dataIndex: 'assessorStandard',

    ellipsis: true,
    width: '200px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },
  {
    title: '甲方工作事项',
    dataIndex: 'taskRemarks',

    ellipsis: true,
    width: '200px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },
  {
    title: '附件模板',
    dataIndex: 'attachmentTemplate',

    ellipsis: true,
    width: '200px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },
  {
    title: '附件',
    dataIndex: 'attachment',

    ellipsis: true,
    width: '200px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },
  {
    title: '任务负责人',
    dataIndex: 'taskOwner',

    ellipsis: true,
    width: '140px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },
  {
    title: '审核员',
    dataIndex: 'assessorName',

    ellipsis: true,
    width: '140px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },

  {
    title: '任务执行人',

    dataIndex: 'taskParticipantStr',
    ellipsis: true,
    width: '140px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },
  {
    title: '计划开始',
    dataIndex: 'startTime',

    ellipsis: true,
    width: '140px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },
  {
    title: '实际开始',
    dataIndex: 'actualStarTime',

    ellipsis: true,
    width: '140px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },
  {
    title: '计划完成',
    dataIndex: 'endTime',
    ellipsis: true,
    width: '120px',

    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },
  {
    title: '	实际完成',
    dataIndex: 'taskFinishTime',
    ellipsis: true,

    width: '120px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },
  {
    title: '计划工时(小时)',
    dataIndex: 'workingHours',

    ellipsis: true,
    width: '130px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },
  {
    title: '实际工时(小时)',
    dataIndex: 'actualWorkHours',

    ellipsis: true,
    width: '130px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },
  {
    title: '工时投入状态',
    dataIndex: 'stateInput',

    ellipsis: true,
    width: '120px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },

  {
    title: '审批状态',
    dataIndex: 'approvalStatus',

    ellipsis: true,
    width: '200px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },
  {
    title: '优先级',
    dataIndex: 'priorityStr',

    ellipsis: true,
    width: '100px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },

  {
    title: '风险数量',
    dataIndex: 'riskNumber',

    ellipsis: true,
    width: '100px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  },

  {
    title: '依赖任务',
    dataIndex: 'taskDependency',

    ellipsis: true,
    width: '90px',
    align: 'center',
    customCell: item => {
      return {
        style: {
          height: '40px',
          padding: '0 10px'
        }
      }
    }
  }
]

onMounted(() => {
  get('/solution-ppm/api/v2/built-in-system-ppm/tpm/table_list').then(data => {
    if (data.code === 200) {
      stateK.templateList = data.data
      activeKey.value = stateK.templateList[0].templateId
      getTableList()
    } else {
      message.error(data.message || '获取模板列表失败')
    }
  })
})

function tabChange(activeKey) {
  if (activeKey === -1 || activeKey === -2 || activeKey === -3) {
    resetNoTemplate()
  } else {
    getTableList()
  }
}

function getTableList() {
  mainLoading.loading = true
  const params = {
    templateId: activeKey.value,
    milePostName: stateK.searchForm.milepostName || '',
    areaName: stateK.searchForm.region || '',
    label: stateK.searchForm.label
  }
  post('/solution-ppm/api/v2/built-in-system-ppm/tpm/progress/search', params)
    .then(data => {
      if (data.code === 200) {
        // 过滤掉标题为 "项目阶段" 或 "任务名称" 的对象
        let filteredColumns = data.data.columns.filter(
          column => column.title !== '项目阶段' && column.title !== '任务名称'
        )
        filteredColumns.forEach(item => {
          ;(item.width = 165), (item.ellipsis = true), (item.align = 'center')
        })
        const oldColumns = stateK.columns.filter(
          column => column.title === '项目阶段' || column.title === '任务名称'
        )
        let combinedColumns = oldColumns.concat(filteredColumns)
        stateK.columns = combinedColumns
        stateK.columns.forEach((column, index) => {
          column.index = index
        })
        stateK.dataSource = data.data.dataSource
        formattedData()
        stateK.dataSource = groupData(stateK.dataSource)
        console.log(stateK.dataSource);
      } else {
        message.error(data.message || '获取任务列表失败')
        stateK.columns = stateK.columns.filter(
          column => column.title === '项目阶段' || column.title === '任务名称'
        )
        stateK.dataSource = []
      }
    })
    .finally(() => {
      mainLoading.loading = false
    })
}

const stateNoTemplate = reactive({
  projectName: undefined,
  projectNameList: [],
  milepostName: undefined,
  milepostList: [],

  taskStatus: undefined,
  time: undefined,
  label: undefined
})

function getNoTemplate() {
  mainLoading.loading = true
  const params = {
    templateId: activeKey.value,
    projectId: stateNoTemplate.projectName,
    milePostId: stateNoTemplate.milepostName
  }
  post('/solution-ppm/api/v2/built-in-system-ppm/tpm/noTemplate/progress/search', params)
    .then(data => {
      noTemplateState.noTemplateData = groupCheckData(data.data)
    })
    .finally(() => {
      mainLoading.loading = false
    })
}

function reset() {
  stateK.searchForm.milepostName = ''
  stateK.searchForm.region = ''
  stateK.searchForm.label = ''
  getTableList()
}

function resetNoTemplate() {
  ;(stateNoTemplate.projectName = undefined),
    (stateNoTemplate.projectNameList = []),
    (stateNoTemplate.milepostName = undefined),
    (stateNoTemplate.milepostList = []),
    (stateNoTemplate.taskStatus = undefined),
    (stateNoTemplate.time = undefined)
  getNoTemplate()
}

function getAreaList() {
  get('/solution-ppm/api/v2/built-in-system-ppm/project_template/ptf/search').then(data => {
    if (data.code === 200) {
      stateK.regionList = data.data.map(item => {
        return {
          label: item.areaName,
          value: item.areaName
        }
      })
    } else {
      message.error('获取项目阶段失败')
    }
  })
}

function getMilepostList() {
  get('/solution-ppm/api/v2/built-in-system-ppm/project/template/1/stage/list').then(data => {
    if (data.code === 200) {
      stateK.milepostList = data.data.map(item => {
        return {
          label: item.stageName,
          value: item.stageName
        }
      })
    } else {
      message.error('获取项目阶段失败')
    }
  })
}
function getLabelList() {
  post('/solution-ppm/api/v2/built-in-system-ppm/tpm/mappgin_search', { templateId: activeKey.value }).then(
    data => {
      if (data.code === 200) {
        stateK.labelList = data.data.map(item => {
          return {
            label: item,
            value: item
          }
        })
      } else {
        message.error('获取标签失败')
      }
    }
  )
}

function formattedData() {
  stateK.dataSource = stateK.dataSource.map(item => {
    const formattedItem = {
      id: item.id,
      milepostName: item.milepostName,
      taskName: item.taskName,
      mark: item.mark,
      critialPath: item.critialPath
    }

    // 检查是否存在 projectDataMap 字段
    if (item.projectDataMap && Object.keys(item.projectDataMap).length > 0) {
      for (const projectName in item.projectDataMap) {
        const project = item.projectDataMap[projectName]
        formattedItem[projectName] = {
          name: project.projectName || '',
          id: project.id || '',
          projectProgressEnum: project.projectProgressEnum || '',
          remarks: project.remarks || null,
          rowSpan: project.rowSpan || '',
          projectId: project.projectId || '',
          taskId: project.taskId || '',
          taskOwner: project.taskOwner || '',
          riskCount: project.riskCount || '',
          actionTaskCount: project.actionTaskCount || ''
        }
      }
    } else {
      // 如果 projectDataMap 为空，则将原对象值复制回去
      formattedItem.projectName = ''
      formattedItem.id = ''
      formattedItem.projectProgressEnum = ''
      formattedItem.remarks = null
      formattedItem.rowSpan = ''
      formattedItem.projectId = ''
      formattedItem.taskId = ''
      formattedItem.riskCount = ''
      formattedItem.taskOwner = ''
      formattedItem.actionTaskCount = ''
    }

    return formattedItem
  })
}

const toggleExpand1 = record => {
  record.expanded = !record.expanded
}

function groupData(data) {
  let milepostName = ''
  if (!data || !data.length) {
    return []
  }
  return data.map((item, index) => {
    if (milepostName !== item.milepostName) {
      milepostName = item.milepostName
      let rowSpan = 0
      for (let i = 0; i < data.length; i++) {
        if (i >= index) {
          if (milepostName === data[i].milepostName) {
            rowSpan += 1
          } else {
            break
          }
        }
      }
      item.rowSpan = rowSpan
      item.border = index
    } else {
      item.rowSpan = 0
    }
    item.rowIndex = index
    return item
  })
}

function handlerDownload({ url, name }) {
  function downBlob(blob) {
    const downloadElement = document.createElement('a')
    const href = window.URL.createObjectURL(blob) // 创建下载的链接
    downloadElement.href = href
    downloadElement.download = name // 下载后文件名
    document.body.appendChild(downloadElement)
    downloadElement.click() // 点击下载
    document.body.removeChild(downloadElement) // 下载完成移除元素
    window.URL.revokeObjectURL(href)
  }

  const data = new FormData()
  data.append('path', url)
  post('/solution-ppm/api/v2/built-in-system-ppm/delivery_task/downloadFile', data, {
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }).then(blob => {
    downBlob(blob)
  })
}

function handleGetTask(text) {
  current.value = text
  const params = {
    taskName: '',
    endTime: '',
    taskOwner: '',
    taskStatusOnOrOff: 'true',
    taskStatusList: [],
    stateInput: '',
    priorityStr: '',
    milepostId: '',
    projectId: text.projectId,
    taskId: text.taskId
  }
  if (activeKey.value !== -1 && activeKey.value.value !== -2 && activeKey.value.value !== -3) {
    post('/solution-ppm/api/v2/built-in-system-ppm/delivery_task/search', params).then(data => {
      if (data.code === 200 && data.data.length > 0) {
        stateK.taskDataSource = [data.data[0]] || []
        stateK.taskVisible = true
      } else {
        message.error('获取任务详情失败')
      }
    })
  } else {
    get(`/solution-ppm/api/v2/built-in-system-ppm/delivery_task/${text.taskId}`).then(data => {
      if (data.code === 200) {
        stateK.taskDataSource = [data.data]
        stateK.taskVisible = true
      } else {
        message.error('获取任务详情失败')
      }
    })
  }
}

function handlerShowRisks(record, type = '未关闭') {
  get(`/solution-ppm/api/v2/built-in-system-ppm/daily/${record.taskId}/${type}/queryRiskList`).then(
    ({ dataList }) => {
      stateK.riskList = dataList
      stateK.visibleRisk = true
    }
  )
}

function handlerShowAction(record) {
  get(`/solution-ppm/api/v2/built-in-system-ppm/action_task/list/${record.taskId}`).then(data => {
    stateK.actionList = data.data.dataList
    stateK.visibleAction = true
  })
}

//     备注
function handleRemarks(text) {
  if (!text.taskId || !text.projectId) {
    message.error('问题数据，taskId或projectId为空')
  } else {
    current.value = text
    stateK.remarks = text.remarks || ''
    stateK.remarksVisible = true
  }
}

function handleCreateRemarsk() {
  const params = {
    projectId: current.value.projectId,
    taskId: current.value.taskId,
    remarks: stateK.remarks
  }
  put('/solution-ppm/api/v2/built-in-system-ppm/tpm/remarks/modify', params).then(data => {
    if (data.code === 200) {
      message.success('添加成功')
      stateK.remarksVisible = false
      getTableList()
      current.value = {}
      if (activeKey.value === -1 || activeKey.value === -2 || activeKey.value === -3) {
        getNoTemplate()
      }
    } else {
      message.error(data.message || '添加失败')
    }
  })
}

//     改名
function handleGetName() {
  post('/solution-ppm/api/v2/built-in-system-ppm/tpm/search').then(data => {
    if (data.code === 200) {
      stateK.editNameVisible = true
      stateK.editNameModel = data.data
      stateK.activeTab = stateK.editNameModel[0].id
    } else {
      message.error(data.message || '获取项目简称失败')
    }
  })
}

const editNameRef = ref([])
const getFormRef = index => {
  editNameRef.value[index] = editNameRef.value[index] || ref(null)
  return editNameRef.value[index]
}

function handleChangeName() {
  let formData = []
  Promise.all(editNameRef.value.map(formRef => formRef.value[0].validate()))
    .then(() => {
      stateK.editNameModel.forEach(tab => {
        tab.data.forEach(item => {
          formData.push({
            mappingId: item.mappingId,
            projectId: item.projectId,
            projectName: item.projectName,
            projectSeqNo: item.projectSeqNo,
            projectShortName: item.projectShortName,
            templateId: item.templateId
          })
        })
      })
      put('/solution-ppm/api/v2/built-in-system-ppm/tpm/batch_modify', formData).then(data => {
        if (data.code === 200) {
          message.success('操作成功')
          stateK.editNameVisible = false
          getTableList()
        } else {
          message.error(data.message || '修改项目简称失败')
        }
      })
    })
    .catch(e => {
      let errMsg = findObjectIndex(stateK.editNameModel, e.values[0])
      if (errMsg) {
        message.info(`请检查-${errMsg.name}-模板下的第-${errMsg.index + 1}-条数据`)
      } else {
        message.info('请检查数据是否填写完整')
      }
    })
}

function findObjectIndex(dataList, targetObject) {
  // 遍历大数组
  for (const item of dataList) {
    // 在当前对象的data数组中查找目标对象
    const index = item.data.findIndex(obj => {
      // 检查mappingId是否匹配
      return obj.projectName === targetObject.projectName
    })
    // 如果找到目标对象，则返回其所在的大数组对象的id和在data数组中的索引
    if (index !== -1) {
      return { ...item, index: index }
    }
  }
  // 如果未找到目标对象，返回 null
  return null
}

function shouldDisplayCountDownWithTooltip(labelList, text) {
  const result = labelList?.filter(label => label.includes(text))
  if (result && result.length > 0) {
    return [true, result[0]]
  } else {
    return false
  }
}

function hasHyphen(str) {
  return str.includes('-')
}

function hasPlus(str) {
  return str.includes('+')
}

function splitStringByColon(inputString) {
  return inputString.split(':')
}

const shouldDisplayCountDown = targetDate => {
  const { days } = calculateTimeDifference(targetDate)
  return days >= 0 && days <= 7
}

// 新-模板项目审核标准格式
function handlerGetStandard(data) {
  stateK.standardList = data.assessorStandard.split(/[,;；]/)
}

// 新-模板项目审核标准格式
function handlerGetSpace(data) {
  return data?.split(/[,;；]/)
}

// 模板项目附件模板下载
function attachmentTemplateDownLoad(item) {
  const props = { ...item }
  let xhr = new XMLHttpRequest()
  xhr.open('GET', props.url, true)
  xhr.responseType = 'blob'
  xhr.onload = function () {
    if (xhr.status === 200) {
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(xhr.response, props.name)
      } else {
        let link = document.createElement('a')
        let body = document.querySelector('body')
        link.href = window.URL.createObjectURL(xhr.response)
        link.download = props.name
        // fix Firefox
        link.style.display = 'none'
        body.appendChild(link)
        link.click()
        body.removeChild(link)
        window.URL.revokeObjectURL(link.href)
      }
    }
  }
  xhr.send()
}

const validateShortName = (rule, value, name) => {
  if (!value) {
    return Promise.reject('请输入项目简称')
  } else {
    return Promise.resolve()
  }
}
const validateNum = (rule, value, name) => {
  const reg = new RegExp(/^[1-9]\d*$/)
  if (!value) {
    return Promise.reject('请输入排序')
  } else {
    if (value.length > 7) {
      return Promise.reject('项目简称限制7个字符')
    } else if (!reg.test(value)) {
      return Promise.reject('请输入正整数')
    } else {
      return Promise.resolve()
    }
  }
}
// tooltip样式
const standardStyle = {
  maxWidth: 'unset'
}
// tooltip样式
const remarksTool = {
  maxWidth: '150px'
}
// tooltip样式
const labelToolStyle = {
  maxWidth: '1000px'
}
const labelCoulmn = [
  {
    title: '加减分类型',
    width: 120,
    dataIndex: 'pointTypeName'
  },
  {
    title: '加减分数',
    width: 100,
    dataIndex: 'taskPoints'
  },
  {
    title: '加减分触发日期',
    width: 200,
    dataIndex: 'updateTime'
  },
  {
    title: '是否扣分',
    width: 120,
    dataIndex: 'deductStatus'
  },
  {
    title: '审批日期',
    width: 200,
    dataIndex: 'taskRectificationPointsTime'
  },
  {
    title: '是否绩效结算',
    width: 200,
    dataIndex: 'settlementView'
  }
]

function getScore(arr) {
  let sum = 0
  if (arr) {
    arr.forEach(item => {
      if (item.deductStatus === '是') {
        sum += item.taskPoints || 0 // 如果 taskPoints 为 null 或者 undefined，将其视为 0
      }
    })
  }
  return sum
}

const currentColumn = ref({})

function getActionList(column, value = null) {
  currentColumn.value = column
  post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/list/${column.projectId}`, {
    associatedTask: '否',
    taskStatusList: value ? value : ['未启动', '进行中', '审批中', '延期']
  }).then(data => {
    stateK.actionList = data.data.dataList
    stateK.visibleAction = true
  })
}

const actionState = reactive({
  riskList: [],
  current: {},
  visibleRisk: false,
  riskColumns: [
    { title: '风险描述', dataIndex: 'riskDescription', width: '300px', align: 'center' },
    { title: '解决方案', dataIndex: 'solution', align: 'center' },
    { title: '风险状态', dataIndex: 'riskState', align: 'center' },
    { title: '提交人', dataIndex: 'createdBy', align: 'center' },
    { title: '提交时间', dataIndex: 'createdTime', align: 'center' },
    { title: '解决人', dataIndex: 'solver', align: 'center' },
    { title: '风险关闭备注', dataIndex: 'riskRemarks', align: 'center' }
  ]
})

function handlerActionShowRisks(id) {
  post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/warn_list/${id}`).then(data => {
    actionState.riskList = data.data
    actionState.current.actionTaskId = id
    actionState.visibleRisk = true
  })
}

// 加减分详情弹窗
// 加减分详情弹窗
const scoreState = reactive({
  visible: false,
  scoreData: [],
  type: ''
})

function showScore(data, type) {
  scoreState.visible = true
  scoreState.scoreData = groupByBusinessDate(data)
  scoreState.type = type
}

function groupByBusinessDate(list, key = 'businessDate') {
  const grouped = list.reduce((acc, item) => {
    const groupKey = item[key]
    if (!acc[groupKey]) {
      acc[groupKey] = {
        month: groupKey,
        data: []
      }
    }
    acc[groupKey].data.push(item)
    return acc
  }, {})

  return Object.values(grouped)
}

function calculateTotalTaskPoints(data) {
  let totalTaskPoints = 0

  data.forEach(monthData => {
    monthData.data.forEach(record => {
      if (record.deductStatus === '是') {
        // 确保 taskPoints 是数字，并累加到 totalTaskPoints
        const taskPoints = parseFloat(record.taskPoints)
        if (!isNaN(taskPoints)) {
          totalTaskPoints += taskPoints
        }
      }
    })
  })

  // 返回保留两位小数的结果
  return parseFloat(totalTaskPoints.toFixed(2))
}

function formattedWeekGoals(data) {
  return (data || '--').replace(/\n/g, '<br>')
}

const weekTargetState = reactive({
  modalTitle: '',
  pmo: false,
  projectDirector: false,
  currentParams: {
    projectId: undefined
  },
  weekData: [],
  weekTargetVisible: false,
  targetList: [],
  mainTarget: ''
})
const weekColumns = ref([
  { title: '核心周目标', dataIndex: 'coreWeekContent', align: 'center', width: 150 },
  {
    title: '优先级',
    dataIndex: 'priority',
    align: 'center',
    width: 80
  },
  {
    title: '项目阶段',
    dataIndex: 'milepostName',
    align: 'center',
    width: 120
  },
  {
    title: '任务名称',
    dataIndex: 'taskName',
    align: 'center',
    width: 100,
    resizable: true
  },
  {
    title: '行动项名称',
    dataIndex: 'actionTaskName',
    align: 'center',
    width: 100,
    resizable: true
  },
  {
    title: '完成标准',
    dataIndex: 'finishStandard',
    align: 'center',
    width: 120,
    resizable: true
  },
  {
    title: '完成情况备注',
    dataIndex: 'finishRemarks',
    align: 'center',
    ellipsis: true,
    width: 150,
    resizable: true
  },
  {
    title: '负责人',
    dataIndex: 'actionTaskOwner',
    align: 'center',
    width: 80
  },
  {
    title: '计划完成时间',
    dataIndex: 'actionTaskEndTime',
    align: 'center',
    width: 100
  },
  {
    title: '实际完成时间',
    dataIndex: 'actionTaskFinishTime',
    align: 'center',
    width: 130
  },
  {
    title: '推进状态',
    dataIndex: 'actionTaskStatus',
    align: 'center',
    width: 120,
    resizable: true
  },
  {
    title: '推进状态更新时间',
    dataIndex: 'modifyDate',
    align: 'center',
    width: 150
  },
  {
    title: '',
    align: 'center',
    width: 50,
    dataIndex: 'expanded'
  }
])
const scrollX = weekColumns.value.reduce((pre, cur) => {
  return parseInt(pre.width) + parseInt(cur.width)
}, {})

const weekTableLoading = ref(false)
const isCJ = ref('项目')

function showWeekTarget(column, flag) {
  isCJ.value = flag
  weekTableLoading.value = true
  titleMenu.id = isCJ.value ? column.sceneProjectId : column.projectId
  post('/solution-ppm/api/v2/built-in-system-ppm/tpm/week_goals/search', {
    projectId: isCJ.value ? column.sceneProjectId : column.projectId
  })
    .then(({ data }) => {
      const now = dayjs()
      weekTargetState.modalTitle = `${data.title}（当前时间：${now.format('YYYY.MM.DD')}）`
      weekTargetState.targetList = data.weekGoalsAndPriorityDtoList?.map(item => ({
        priority: item.priority,
        id: item.id,
        editing: false,
        weekGoals: item.weekGoals,
        weekGoalsId: item.weekGoalsId
      }))
      weekTargetState.weekData = data.weekGoalsTaskDtoList || []
      weekTargetState.weekTargetVisible = true
      if (isCJ.value) {
        weekTargetState.currentParams.projectId = column.sceneProjectId
      } else {
        weekTargetState.currentParams.projectId = column.projectId
      }
      weekTargetState.pmo = data.pmo
      weekTargetState.projectDirector = data.projectDirector
    })
    .finally(() => {
      weekTableLoading.value = false
    })
}

const priorityInput = ref(null)
const statusInput = ref(null)
const finishInput = ref(null)
const coreWeekInput = ref(null)
const handleEdit = async (record, flag, inputRef) => {
  if (!weekTargetState.pmo) {
    message.info('暂无权限')
  } else {
    record[flag] = true
    await nextTick()
    if (inputRef === 'priorityInput' && priorityInput.value) {
      priorityInput.value.focus()
    }
    if (inputRef === 'statusInput' && statusInput.value) {
      statusInput.value.focus()
    }
    if (inputRef === 'finishInput' && finishInput.value) {
      finishInput.value.focus()
    }
    if (inputRef === 'coreWeekInput' && coreWeekInput.value) {
      coreWeekInput.value.focus()
    }
  }
}
const handleEditStatus = async (record, flag, inputRef) => {
  if (!weekTargetState.projectDirector) {
    message.info('暂无权限')
  } else {
    record[flag] = true
    await nextTick()
    if (inputRef === 'statusInput' && statusInput.value) {
      statusInput.value.focus()
    }
  }
}
const handleSave = (record, key, flag) => {
  const { priorityEditing, statusEditing, finishEditing, coreWeekEditing, ...dataToSave } = record
  put('/solution-ppm/api/v2/built-in-system-ppm/tpm/week_goals/action_task', dataToSave)
    .then(data => {
      if (data.code === 200) {
        message.success('修改成功')
      } else {
        message.success(data.message)
      }
    })
    .finally(() => {
      record[flag] = false
      showWeekTarget(weekTargetState.currentParams)
    })
}
const expandedIndices = ref([])
const isExpanded = index => {
  return expandedIndices.value.includes(index)
}

const toggleExpand = index => {
  if (isExpanded(index)) {
    expandedIndices.value = expandedIndices.value.filter(i => i !== index)
  } else {
    expandedIndices.value.push(index)
  }
}

async function handlerEditTarget(value, index) {
  if (!weekTargetState.pmo) {
    message.info('暂无权限')
  } else {
    weekTargetState.targetList[index].editing = true
    await nextTick(() => {
      const textarea = document.querySelector(`.textarea-${index}`)
      if (textarea) {
        textarea.focus()
      }
    })
  }
}

function saveTarget(index) {
  const { editing, ...dataToSave } = weekTargetState.targetList[index]
  put('/solution-ppm/api/v2/built-in-system-ppm/tpm/week_goals/priority', dataToSave).then(data => {
    if (data.code === 200) {
      weekTargetState.targetList[index].editing = false
      message.success('修改目标成功')
      showWeekTarget(weekTargetState.currentParams)
    } else {
      message.error(data.message)
      showWeekTarget(weekTargetState.currentParams)
    }
  })
}

function handleResizeColumn(w, col) {
  col.width = w
}

//     无模板项目表格
const noTemplateState = reactive({
  noTemplateData: [],
  tableLoading: false
})
const noTemplateColumns = [
  {
    title: '项目阶段',
    dataIndex: 'projectPhase',
    ellipsis: true,
    customCell: item => {
      const { rowIndex, rowSpan } = item
      return {
        style: {
          padding: '0 5px'
        },
        rowSpan: rowSpan
      }
    },
    align: 'center'
  },
  {
    title: '任务名称',
    dataIndex: 'taskName',
    ellipsis: true,
    align: 'center',
    customCell: item => {
      return {
        style: {
          padding: '0 5px'
        }
      }
    }
  },
  {
    title: '任务状态',
    dataIndex: 'taskStatus',
    ellipsis: true,
    width: '130px',
    align: 'center'
  }
]
const mainLoading = reactive({
  loading: false,
  tip: '加载中...'
})

function getNoTemplateMilepostList() {
  if (stateNoTemplate.projectName) {
    get(
      `/solution-ppm/api/v2/built-in-system-ppm/delivery_milepost/${stateNoTemplate.projectName}/milepost_name/list`
    ).then(data => {
      stateNoTemplate.milepostList = data.data.dataList.map(item => {
        return {
          label: item.milepostName,
          value: item.milepostId
        }
      })
    })
  }
}

function getNoTemplateProject() {
  post('/solution-ppm/api/v2/built-in-system-ppm/tpm/noTemplate/select', {
    templateId: activeKey.value
  }).then(data => {
    stateNoTemplate.projectNameList = data.data
  })
}

function projectNameChange(value) {
  stateNoTemplate.milepostName = undefined
}

function groupCheckData(data) {
  data.forEach(group => {
    let currentMilepostName = '' // 初始化当前里程碑名称为空字符串
    group.data = group.data.map((item, index) => {
      if (currentMilepostName !== item.projectPhase) {
        // 如果当前里程碑名称与项目阶段不同
        currentMilepostName = item.projectPhase // 更新当前里程碑名称
        let rowSpan = 0
        for (let i = index; i < group.data.length; i++) {
          // 计算新组的rowSpan
          if (currentMilepostName === group.data[i].projectPhase) {
            rowSpan += 1
          } else {
            break // 当遇到不同的项目阶段时，停止计数
          }
        }
        item.rowSpan = rowSpan // 设置当前项目的rowSpan
      } else {
        item.rowSpan = 0 // 对于组中间的项目，设置rowSpan为0
      }
      return item // 返回修改后的项目
    })
  })
  return data // 返回修改后的数据
}

const titleMenu = reactive({
  visible: false,
  id: undefined
})

function showContextMenu(event, index, column) {
  titleMenu.visible = true
}

function handleShowTask() {
  put(`/solution-ppm/api/v2/built-in-system-ppm/tpm/week_goals/batch_action_task/${titleMenu.id}`).then(data => {
    if (data.code === 200) {
      message.success('恢复成功')
      post('/solution-ppm/api/v2/built-in-system-ppm/tpm/week_goals/search', {
        projectId: titleMenu.id
      }).then(data => {
        weekTargetState.weekData = data.data.weekGoalsTaskDtoList || []
      })
    }
  })
}

function handleHideTask() {
  let params = menuData.value
  params.taskStatus = '0'
  put(`/solution-ppm/api/v2/built-in-system-ppm/tpm/week_goals/action_task`, params).then(data => {
    if (data.code === 200) {
      message.success('隐藏成功')
      post('/solution-ppm/api/v2/built-in-system-ppm/tpm/week_goals/search', {
        projectId: titleMenu.id
      }).then(data => {
        weekTargetState.weekData = data.data.weekGoalsTaskDtoList || []
      })
    } else {
      message.error(data.message)
    }
  })
}

onMounted(() => {
  document.addEventListener('click', handleGlobalClick)
  document.body.removeEventListener('click', bodyClick)
})

onBeforeUnmount(() => {
  document.removeEventListener('click', handleGlobalClick)
})

function handleGlobalClick() {
  if (titleMenu.visible) {
    titleMenu.visible = false
  }
}

const menuStyle = ref({
  position: 'absolute',
  top: '0',
  left: '0',
  border: '1px solid #eee',
  color: '#3875ff',
  padding: '0 10px',
  cursor: 'pointer'
})
const menuData = ref({})
const menuVisible = ref(false)
const bodyClick = () => {
  menuVisible.value = false
  document.body.removeEventListener('click', bodyClick)
}

// const customClick = (record, index) => {
//   return {
//     onContextmenu: (event) => {
//       event.preventDefault();
//       menuVisible.value = true
//       menuData.value = record
//       console.log(event);
//       console.log(index+1,'index');
//       menuStyle.value.top = (event.clientY) + "px";
//       menuStyle.value.left = (event.clientX-180) + "px";
//       document.body.addEventListener("click", bodyClick);
//     },
//     style: {
//       cursor: 'pointer',
//     },
//   };
// };

const customClick = (record, index) => {
  return {
    onContextmenu: event => {
      event.preventDefault()
      menuVisible.value = true
      menuData.value = record

      // 计算菜单的位置
      const modalElement = document.querySelector('.menu-modal')
      console.log(modalElement, 'modalElement')
      const modalRect = modalElement.getBoundingClientRect()
      const topOffset = event.clientY - modalRect.top
      const leftOffset = event.clientX - modalRect.left - 180

      // 设置菜单的样式
      // menuStyle.value = {
      //   top: `${topOffset}px`,
      //   left: `${leftOffset}px`,
      // };
      menuStyle.value.top = `${topOffset}px`
      menuStyle.value.left = `${leftOffset}px`

      // 添加点击 body 隐藏菜单的事件监听
      document.body.addEventListener('click', bodyClick)
    },
    style: {
      cursor: 'pointer'
    }
  }
}

const hideTask = reactive({})

function tipMessage() {
  message.info('该任务已隐藏')
}

const statuState = reactive({
  visible: false,
  list: []
})

function getTaskStatus(id, type) {
  get(`/solution-ppm/api/v2/built-in-system-ppm/refactoring_task/task_approval_detail/${id}/${type}    `).then(
    data => {
      if (data.code !== 200) {
        message.error(data.message)
        return
      }
      statuState.visible = true
      statuState.list = data.data
    }
  )
}

const getIconStatus = status => {
  if (status === 'finish') {
    return 'finish'
  } else if (status === 'process') {
    return 'process'
  } else {
    return 'error'
  }
}
</script>
<style lang="less" scoped>
.page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.page_root :deep(.@{ant-prefix}-spin-nested-loading),
.page_root :deep(.@{ant-prefix}-spin-container)
{
  height: 100%;
}
.page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper)
{
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
}
.page_root :deep(.@{ant-prefix}-table)
{
  flex: auto;
  overflow: auto;
}
.table-moreBtn_down {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
}

.table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
  background: #ebf1ff;
}

/*  表格树结构样式处理，展开按钮层级增加*/
:deep(.@{ant-prefix}-table-row-expand-icon) {
  z-index: 1;
}
/*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
:deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 15px !important;
  width: calc(100% - 15px);
}
:deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 30px !important;
  width: calc(100% - 30px);
}
:deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 45px !important;
  width: calc(100% - 45px);
}
:deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 60px !important;
  width: calc(100% - 60px);
}

/* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
:deep(.@{ant-prefix}-transfer-list)
{
  height: 100%;
  width: 50%;
}


/*
  样式
  */
.page_root {
  overflow: hidden;
}
.kb-page {
  padding: 0 20px 20px 20px;
  height: 100%;
  position: relative;
  background-color: #fff;
  border-radius: 6px;
}
.search-div {
  background-color: #fff;
  margin-bottom: 16px;
  height: 72px;
  padding: 0 20px;
  border-radius: 6px;
}

.table-tip {
  display: flex;
  height: 63px;
  justify-content: space-between;
}
.finish,
.running,
.unstart,
.daily {
  display: flex;
  line-height: 62px;
  margin-right: 13px;
}
.unstart {
  margin-right: 24px;
}
.left-top {
  display: flex;
}
.right {
  flex: 1;
  display: flex;
  justify-content: end;
}
.finish-box,
.running-box,
.unstart-box,
.daily-box,
.association-daily-box {
  background: #4cdf95;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  margin: 20px 0;
}
.tip-msg {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #595959;
  letter-spacing: 0;
  text-align: right;
  font-weight: 400;
}
.running-box {
  background: #7aa1f9;
  border-radius: 4px;
}
.unstart-box {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background-color: #fff;
}
.daily-box {
  background: #ff5656;
  border-radius: 4px;
}
.association-daily-box {
  background: #ffc756;
  border-radius: 4px;
}
.one-click,
.hover-click,
.db-click,
.cercle-click,
.squire-click {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #595959;
  letter-spacing: 0;
  text-align: right;
  font-weight: 400;
  display: flex;
  line-height: 62px;
  margin-right: 16px;
}
.one-click-icon,
.db-click-icon,
.hover-click-icon,
.cercle-click-icon,
.squire-click-icon {
  width: 16px;
  height: 16px;
  background-size: cover;
  margin: 22px 0;
  margin-right: 4px;
}
.one-click-icon {
  background-image: url('http://10.40.0.33:9001/file-storage/432491862019381248.png');
  background-size: cover;
}
.db-click-icon {
  background-image: url('http://10.40.0.33:9001/file-storage/432491879230707712.png');
  background-size: cover;
}
.hover-click-icon {
  background-image: url('http://10.40.0.33:9001/file-storage/432491837560297472.png');
  background-size: cover;
}
.cercle-click-icon {
  background-image: url('http://10.40.0.33:9001/file-storage/440302589158752256.png');
  background-size: cover;
}
.squire-click-icon {
  background-image: url('http://10.40.0.33:9001/file-storage/440302604159680512.png');
  background-size: cover;
}
.record-div-green,
.record-div-red,
.record-div-white,
.record-div-blue,
.record-div-orange,
.record-div-hidden{
  min-width: 10px;
  min-height: 10px;
  width: 100%;
  height: 30px;
  position: relative;
}
.icon-hollow,
.icon-solid,
.icon-hollow-deep,
.icon-solid-deep {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  right: -5px;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.icon-hollow {
  background-image: url('http://10.40.0.33:9001/file-storage/432479497347504128.png');
  background-size: cover;
}
.icon-solid {
  background-image: url('http://10.40.0.33:9001/file-storage/432811531221702656.png');
  background-size: cover;
}
.icon-hollow-deep {
  background-image: url('http://10.40.0.33:9001/file-storage/432486532266956800.png');
  background-size: cover;
}
.icon-solid-deep {
  background-image: url('http://10.40.0.33:9001/file-storage/432489053010106368.png');
  background-size: cover;
}
.tool-tip {
  display: inline-block;
  width: 16px;
  height: 16px;
}
.record-div-blue {
  background-color: #7aa1f9;
}
.record-div-red {
  background-color: #ff5656;
}
.record-div-green {
  background-color: #4cdf95;
}
.record-div-orange {
  background-color: #ffc756;
}
.record-div-hidden{
  min-width: 164px;
  height: 30px;
  background-color: #d9d9d9;
}


/*
  任务列表样式
  */

/* 倒计时 */
.count-down {
  border-radius: 1px;
  background: rgba(255, 123, 0, 0.1);
  color: #ff7b00;
  height: 14px;
  min-width: 15%;
  margin-right: 3px;
  margin-bottom: 3px;
}

/* 全组 */
.weight-num {
  font-weight: 600;
}

.all-group-yes {
  border-radius: 1px;
  background: rgba(48, 191, 120, 0.1);
  color: #30bf78;
  height: 14px;
  width: 15%;
  line-height: 14px;
  margin-right: 3px;
  margin-bottom: 3px;
}

/* 项目经理 */
.pm-score-yes {
  border-radius: 1px;
  background: rgba(48, 191, 120, 0.1);
  color: #30bf78;
  height: 14px;
  line-height: 14px;
  margin-right: 3px;
  width: 15%;
}

/* 负责人 */
.ower-score-yes {
  border-radius: 1px;
  background: rgba(48, 191, 120, 0.1);
  color: #30bf78;
  height: 14px;
  line-height: 14px;
  width: 50%;
}

.all-group-no {
  border-radius: 1px;
  background: rgba(245, 34, 45, 0.1);
  color: #f5222d;
  height: 14px;
  width: 50%;
  line-height: 14px;
  margin-bottom: 3px;
  margin-right: 3px;
}

/* 项目经理 */
.pm-score-no {
  border-radius: 1px;
  background: rgba(245, 34, 45, 0.1);
  color: #f5222d;
  height: 14px;
  line-height: 14px;
  margin-right: 3px;
  width: 50%;
}

/* 负责人 */
.ower-score-no {
  border-radius: 1px;
  background: rgba(245, 34, 45, 0.1);
  color: #f5222d;
  height: 14px;
  line-height: 14px;
  width: 50%;
  margin-right: 3px;
}

.count-down-hover {
  color: #262626;
}

.count-down-hover > p {
  margin: 0;
}

.attachment-template {
  display: block;
  overflow-x: auto; /* 允许横向滚动 */
  overflow-y: hidden; /* 隐藏垂直滚动条 */
  scrollbar-width: thin; /* Firefox 64+ */
  scrollbar-color: transparent transparent; /* Firefox 64+ */
}

.attachment-template::-webkit-scrollbar {
  height: 0px; /* 谷歌、Safari、Edge等浏览器 */
}

.attachment-template::-webkit-scrollbar-thumb {
  background-color: transparent; /* 设置滚动条的颜色为透明 */
}

.extension-color {
  border-radius: 1px;
  background: rgba(89, 89, 89, 0.1);
  color: #595959;
  height: 14px;
  min-width: 15%;
  margin-right: 3px;
  margin-bottom: 3px;
}

.count-down-content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 12px 10px;
}
.count-down-content-detail {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
  padding: 12px 10px;
}
.count-down-content-detail > div {
  box-sizing: border-box;
  height: 14px;
  text-align: center;
  line-height: 14px;
  font-size: 12px;
}
.count-down-content > div {
  box-sizing: border-box;
  height: 14px;
  text-align: center;
  line-height: 14px;
  font-size: 12px;
}
/*任务列表样式*/
:deep(.ant3-tabs-top > .ant3-tabs-nav) {
  margin: 0;
  border-bottom: 1px solid #d9d9d9;
}

.task-detail {
  height: 700px;
  overflow-y: auto;
}
.fold-rows {
  width: 220px; /* 设置div宽度为220px */
  overflow: hidden; /* 隐藏超出部分 */
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.wqd-btn,
.yq-btn,
.wc-btn,
.yqwc-btn,
.jxz-btn,
.spz-btn {
  background: #ffffff;
  border-radius: 2px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  letter-spacing: 0;
  text-align: center;
  line-height: 40px;
  font-weight: 400;
  width: 66px;
  height: 22px;
  line-height: 22px;
  margin: 0 auto;
}

.wc-btn {
  border: 1px solid rgba(48, 191, 120, 1);
  color: #30bf78;
}

.yq-btn {
  border: 1px solid rgba(224, 32, 32, 1);
  color: #e02020;
}

.wqd-btn {
  border: 1px solid rgba(140, 140, 140, 1);
  color: #8c8c8c;
}

.jxz-btn {
  border: 1px solid rgba(56, 117, 255, 1);
  color: #3875ff;
}

.yqwc-btn {
  border: 1px solid rgba(255, 152, 70, 1);
  color: #ff9846;
}

.spz-btn {
  border: 1px solid #00b4ec;
  color: #00b4ec;
}
.attr {
  overflow-y: auto;
}
.two-line {
  border: 1px solid #afc8ff;
  display: flex;
  height: 40px;
  line-height: 40px;
}
.two-item {
  display: flex;
  width: 50%;
}
.two-left {
  padding: 0 7px;
  text-align: right;
  width: 150px;
  background-color: #ebf1ff;
}
.two-right {
  border-left: 1px solid #afc8ff;
  border-right: 1px solid #afc8ff;
  flex: 1;
  padding: 0 7px;
}
.text-bold {
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 600;
}
.one-line {
  display: flex;
  min-height: 40px;
  line-height: 40px;
  border: 1px solid #afc8ff;
}
.one-left {
  background-color: #ebf1ff;
  width: 150px;
  padding: 0 7px;
  text-align: right;
}
.one-right {
  padding: 0 7px;
  flex: 1;
  border-left: 1px solid #afc8ff;
}
.risk-num {
  color: #3875ff;
  cursor: pointer;
}
.one-line,
.two-line {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 400;
}
a {
  color: #3875ff;
}
.task-dependency {
  white-space: pre-wrap;
}
.task-name-long {
  display: inline-block;
  width: 300px;
  overflow: hidden; /* 隐藏超出部分 */
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.edit-form {
  margin-top: 16px;
  height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}
.risk-num-white,
.risk-num-red,
.risk-num-blue,
.risk-num-green {
  position: absolute;
  right: 20px;
  top: 9px;
  font-size: 10px;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid white;
  background-color: transparent;
  line-height: 10px;
}
.risk-num-white {
  border: 1px solid #262626;
}
.action-num-white,
.action-num-red,
.action-num-blue,
.action-num-green {
  position: absolute;
  right: 38px;
  top: 10px;
  font-size: 10px;
  color: #fff;
  cursor: pointer;
  width: 12px;
  height: 12px;
  border-radius: 4px; /* 设置圆角大小 */
  border: 1px solid white;
  background-color: transparent;
  line-height: 9px;
  font-weight: 600;
}
.action-num-white {
  color: #262626;
  border: 1px solid #262626;
}
.task-ower-white,
.task-ower-red,
.task-ower-blue,
.task-ower-green {
  position: absolute;
  left: 3px;
  top: 3px;
  font-size: 12px;
  color: #fff;
}
.risk-num-white,
.risk-num-white {
  color: #666666;
}
.task-ower-white {
  color: #262626;
}

//    里程碑终验初验
.task-name {
  position: relative;
  height: 40px;
  line-height: 40px;
  width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-milestone {
  position: absolute;
  top: 13px;
  left: 9px;
  width: 45px;
  height: 14px;
  font-size: 12px;
  line-height: 14px; /* 与高度相同 */
  color: #3875ff;
  background: #ebf1ff;
  text-align: center;
}
.task-first {
  position: absolute;
  top: 13px;
  left: 16px;
  width: 32px;
  height: 14px;
  background-image: url('http://10.40.0.33:9001/file-storage/422482758234415104.png');
  background-size: cover;
}

.task-over {
  position: absolute;
  top: 13px;
  left: 16px;
  width: 32px;
  height: 14px;
  background-image: url('http://10.40.0.33:9001/file-storage/422482777140240384.png');
  background-size: cover;
}

.is-first {
  margin-left: 55px;
}

.is-first-no {
  margin-left: 16px;
}

.task-name-title {
  display: inlie-block;
  min-width: 50px;
}

.finish-standard {
  display: inlie-block;
  min-width: 70px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.no-first {
  margin-left: 20px;
}
/*关键路径*/
.critical-path {
  position: absolute;
  top: 13px;
  left: 5px;
  font-size: 12px;
  width: 60px;
  height: 14px;
  line-height: 14px; /* 与高度相同 */
  color: #ff9846;
  background: #fff5ed;
  text-align: center;
}
.task-milestone-right {
  left: 70px;
}
.is-first-path {
  margin-left: 115px;
}
.task-first-right {
  position: absolute;
  top: 13px;
  left: 70px;
  width: 32px;
  height: 14px;
  background-image: url('http://10.40.0.33:9001/file-storage/422482758234415104.png');
  background-size: cover;
}

.task-over-right {
  position: absolute;
  top: 13px;
  left: 70px;
  width: 32px;
  height: 14px;
  background-image: url('http://10.40.0.33:9001/file-storage/422482777140240384.png');
  background-size: cover;
}
.is-first-path-no-mark {
  margin-left: 70px;
}

.kb-title {
  position: relative;
  cursor: pointer;
  text-align: center;
}
.kb-title-icon {
  position: absolute;
  right: 5px;
  top: 4px;
  font-size: 12px;
  color: #888b92;
  cursor: pointer;
  width: 14px;
  height: 14px;
  border-radius: 4px; /* 设置圆角大小 */
  border: 1px solid #888b92;
  background-color: transparent;
  line-height: 12px;
  font-weight: 600;
  text-align: center;
}
.cj-title-icon {
  position: absolute;
  left: 5px;
  top: 3px;
  font-size: 12px;
  cursor: pointer;
  width: 14px;
  height: 14px;
}

.count-down-content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 5px;
}

.count-down-content > div {
  box-sizing: border-box;
  height: 14px;
  text-align: center;
  line-height: 14px;
  font-size: 12px;
}

/* 倒计时 */
.count-down {
  border-radius: 1px;
  background: rgba(255, 123, 0, 0.1);
  color: #ff7b00;
  height: 14px;
  min-width: 52%;
  margin-right: 3px;
  margin-bottom: 3px;
}

/* 全组 */
.weight-num {
  font-weight: 600;
}

.all-group-yes {
  border-radius: 1px;
  background: rgba(48, 191, 120, 0.1);
  color: #30bf78;
  height: 14px;
  width: 52%;
  line-height: 14px;
  margin-right: 3px;
  margin-bottom: 3px;
}

/* 项目经理 */
.pm-score-yes {
  border-radius: 1px;
  background: rgba(48, 191, 120, 0.1);
  color: #30bf78;
  height: 14px;
  line-height: 14px;
  margin-right: 3px;
  width: 45%;
  margin-bottom: 3px;
}

/* 负责人 */
.ower-score-yes {
  border-radius: 1px;
  background: rgba(48, 191, 120, 0.1);
  color: #30bf78;
  height: 14px;
  line-height: 14px;
  width: 50%;
  margin-right: 3px;
}

.all-group-no {
  border-radius: 1px;
  background: rgba(245, 34, 45, 0.1);
  color: #f5222d;
  height: 14px;
  width: 44%;
  line-height: 14px;
  margin-bottom: 3px;
  margin-right: 3px;
}

/* 项目经理 */
.pm-score-no {
  border-radius: 1px;
  background: rgba(245, 34, 45, 0.1);
  color: #f5222d;
  height: 14px;
  line-height: 14px;
  margin-right: 3px;
  width: 45%;
}

/* 负责人 */
.ower-score-no {
  border-radius: 1px;
  background: rgba(245, 34, 45, 0.1);
  color: #f5222d;
  height: 14px;
  line-height: 14px;
  width: 50%;
  margin-right: 3px;
}

.count-down-hover {
  color: #262626;
}

.count-down-hover > p {
  margin: 0;
}
.score-title-first {
  background: rgba(250, 173, 20, 0.1);
  color: #262626;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
}

.score-title {
  font-size: 16px;
  color: #262626;
  font-weight: 600;
  margin: 18px 0;
}

.score-num {
  font-size: 18px;
  color: #3875ff;
  font-weight: 600;
}

.score-num-red {
  color: #f5222d;
  font-weight: 600;
}

.score-month {
  font-size: 16px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 400;
  margin-bottom: 12px;
}

.month-score {
  font-size: 16px;
  color: #595959;
  letter-spacing: 0;
  font-weight: 400;
  display: inline-block;
  margin-left: 24px;
}

.default-score {
  font-size: 16px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 500;
}
.score-table :deep(.@{ant-prefix}-table-thead) > tr > th {
  background: #3875ff;
  font-size: 14px;
  font-family: arial, helvetica, 'microsoft yahei';
  font-weight: 600;
  color: #fff;
  padding: 8px 16px;
  border: none;
}
.score-table :deep(.@{ant-prefix}-table-tbody) tr > td {
  font-size: 14px;
  font-family: arial, helvetica, 'microsoft yahei';
  font-weight: 400;
  color: #262626;
  padding: 8px 16px;
  border-bottom: 1px solid #d9d9d9;
  word-break: break-all;
}
.kb-table-box:deep(.@{ant-prefix}-table-thead) > tr > th {
  background-color: #ebf1ff;
  color: #262626;
  font-weight: 600;
  padding: 8px 4px;
  border-right:1px solid #d9d9d9 !important;
}

.target-table-box:deep(.@{ant-prefix}-table-thead) > tr > th {
  background-color: #ebf1ff;
  color: #262626;
  font-weight: 600;
  padding: 8px 4px;
}
.target-table-box:deep(.@{ant-prefix}-table-thead) > tr > th {
  background-color: #ebf1ff;
  color: #262626;
  font-weight: 600;
  padding: 8px 4px;
}
.target-table-box:deep(.@{ant-prefix}-table-tbody) tr > td {
  font-size: 14px;
  font-family: arial, helvetica, 'microsoft yahei';
  font-weight: 400;
  color: #262626;
  padding: 8px 8px;
  border-bottom: 1px solid #d9d9d9;
  word-break: break-all;
}
.default-table:deep(.@{ant-prefix}-table-thead) > tr > th {
  background-color: #3875ff;
  color: #fff;
  font-weight: 600;
  padding: 8px 16px;
  border-right: 1px solid #d9d9d9;
}
.default-table:deep(.@{ant-prefix}-table-tbody) tr > td {
  font-size: 14px;
  font-family: arial, helvetica, 'microsoft yahei';
  font-weight: 400;
  color: #262626;
  padding: 8px 8px;
  border-bottom: 1px solid #d9d9d9;
  word-break: break-all;
}
:deep(
                .kb-table-box
                    .ant3-table.ant3-table-bordered
                    > .ant3-table-container
                    > .ant3-table-body
                    > table
                    > tbody
                    > tr
                    > td
            ) {
  border: 1px solid #d9d9d9;
  color: #262626;
  border-left: none;
}

:deep(.kb-table-box .ant3-table-tbody tr) {
  line-height: 22px;
  height: 30px;
  padding: 2px 0;
}

.kb-table-box :deep(.@{ant-prefix}-table-tbody) tr > td {
  font-size: 14px;
  font-family: arial, helvetica, 'microsoft yahei';
  font-weight: 400;
  color: #595959;
  border-bottom: 1px solid #d9d9d9;
  padding: 2px 0;
  word-break: break-all;
}

:deep(.table-striped td) {
  background-color: #fafafa;
}
.risk-table :deep(.@{ant-prefix}-table-thead) > tr > th {
  background: #3875ff;
  font-size: 14px;
  font-family: arial, helvetica, 'microsoft yahei';
  font-weight: 600;
  color: #fff;
  padding: 8px 16px;
  border: none;
}
.risk-table :deep(.@{ant-prefix}-table-tbody) tr > td {
  font-size: 14px;
  font-family: arial, helvetica, 'microsoft yahei';
  font-weight: 400;
  color: #262626;
  padding: 8px 16px;
  border-bottom: 1px solid #d9d9d9;
  word-break: break-all;
}
.count-down-content {
  cursor: pointer;
}
.target-message {
  display: flex;
  margin-bottom: 7px;
  line-height: 32px;
}
.target-title {
  width: 150px;
  font-size: 14px;
  color: #595959;
  font-weight: 400;
  text-align: right;
}
.target-content {
  position: relative;
  flex: 1;
}
.target-span {
  width: 100%;
  display: inline-block;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: top;
  font-size: 14px;
  color: #262626;
  font-weight: 400;
}
.target-span[style*='height: auto;'] {
  white-space: normal;
}
.priority-edit {
  display: inline-block;
  width: 100%;
  cursor: pointer;
}
.target-table-box
:deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
.@{ant-prefix}-table-container
.@{ant-prefix}-table-thead
> tr
> th {
  border-right: 1px solid #d9d9d9;
}
.custom-title {
  display: inline-block;
  width: 100%;
  text-align: left;
}
.target-table-box {
  margin-top: 16px;
  position: relative;
}
.no-template-main {
  width: 100%;
  overflow-x: auto;
  height: 600px;
  display: flex;
  padding-bottom: 8px;
  padding-left: 1px;
}
.table-item {
  margin-top: 1px;
  width: 530px;
  margin-right: 16px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 16px;
  background-color: #fff;
  flex-shrink: 0;
}
.table-item:last-child {
  margin-right: 0;
}
.table-title {
  margin-bottom: 13px;
  font-size: 16px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 500;
  height: 16px;
  line-height: 16px;
  border-left: 4px solid #3875ff;
  padding-left: 8px;
  cursor: pointer;
  position: relative;
}
.action-title-icon {
  position: absolute;
  right: 0;
  top: 4px;
  font-size: 12px;
  color: #888b92;
  cursor: pointer;
  width: 14px;
  height: 14px;
  border-radius: 4px; /* 设置圆角大小 */
  border: 1px solid #888b92;
  background-color: transparent;
  line-height: 12px;
  font-weight: 600;
  text-align: center;
}
.table-item
:deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
.@{ant-prefix}-table-container
.@{ant-prefix}-table-thead
> tr
> th {
  border-right: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
}

.table-item :deep(.@{ant-prefix}-table-tbody) tr > td {
  font-size: 14px;
  font-family: arial, helvetica, 'microsoft yahei';
  font-weight: 400;
  color: #595959;
  border-bottom: 1px solid #d9d9d9;
  padding: 2px 0;
  word-break: break-all;
}

:deep(.table-item .ant3-table-tbody tr) {
  line-height: 22px;
  height: 30px;
  padding: 2px 0;
}

:deep(
                .table-item
                    .ant3-table.ant3-table-bordered
                    > .ant3-table-container
                    > .ant3-table-body
                    > table
                    > tbody
                    > tr
                    > td
            ) {
  border: 1px solid #d9d9d9;
  color: #262626;
  border-left: none;
}

.table-item:deep(.@{ant-prefix}-table-thead) > tr > th {
  background-color: #ebf1ff;
  color: #262626;
  font-weight: 600;
  padding: 8px 4px;
  border-bottom: 1px solid #d9d9d9;
}
.action-select {
  display: flex;
  justify-content: start;
}
.no-template-content {
  height: 100%;
  width: 100%;
  position: relative;
}
.no-img {
  background-image: url('http://10.40.0.33:9001/file-storage/431370789385246720.png');
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  width: 200px;
  height: 100px;
}
.tip-msg-img {
  position: relative;
  top: 90px;
  left: 65px;
}
.context-menu {
  position: absolute;
  right: 50px;
  top: 10px;
}

/*样式*/

.title-new-status {
  height: 62px;
  line-height: 36px;
  padding: 0 16px;
  margin-bottom: 16px;
  background-image: url('http://10.40.0.33:9001/file-storage/457843108093009920.png');
  background-size: cover;
  border: 1px solid #3875ff;
  border-radius: 5px;
}

:deep(.ant3-steps-item-container) {
  padding: 0 16px;
}
:deep(.ant3-steps-item-tail::after) {
  margin-left: 12px;
  background-color: #3875ff;
}
:deep(.ant3-steps-item-description) {
  font-size: 12px;
  color: #595959;
  text-align: left;
  line-height: 20px;
  font-weight: 400;
}
:deep(.ant3-steps-item-icon) {
  width: 24px;
  height: 24px;
  line-height: 24px;
  color: #3875ff;
  margin-top: 6px;
}
:deep(.ant3-steps-item-title) {
  height: 28px;
  font-size: 14px;
  color: #262626;
  text-align: left;
  line-height: 22px;
  font-weight: 400;
}
:deep(.ant3-steps-item-process > .ant3-steps-item-container > .ant3-steps-item-icon) {
  background-color: #3875ff;
}
:deep(.ant3-steps-vertical > .ant3-steps-item > .ant3-steps-item-container > .ant3-steps-item-tail::after) {
  background: #3875ff;
}
:deep(.status-step .ant3-steps-vertical > .ant3-steps-item .ant3-steps-item-icon) {
  border-color: #3875ff;
}
:deep(.ant3-steps-item-finish .ant3-steps-item-icon > .ant3-steps-icon) {
  color: #3875ff !important;
}
.task-status-new{
  cursor: pointer;
}
.left-title,
.right-title {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  letter-spacing: 0;
  text-align: left;
  font-weight: 400;
  height: 31px;
  line-height: 31px;
}
.weight-status {
  font-size: 14px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 500;
}
.batch-line{
  width: 100%;
  border-top: 1px solid #d9d9d9;
  margin: 16px 0;
}
.weight-status-new{
  font-weight: 600;
  color:#262626;
}

.phase-wrapper {
  max-height: 800px;
  .title {
    font-size: 16px;
    color: #262626;
    font-weight: 600;
    padding-left: 24px;
    margin-bottom: 12px;
    background:
      url("data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBpZD0i6aG16Z2iLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLor6bmg4UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03MDAsIC0xODgpIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC0yMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjc2LCAxMTEpIj4KICAgICAgICAgICAgICAgIDxnIGlkPSLnvJbnu4QtMjQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0LCA3MykiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSLpobnnm67pmLbmrrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDQpIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSLnvJbnu4QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIsIDAuNSkiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgc3Ryb2tlPSIjMzg3NUZGIiB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9IjExIiBoZWlnaHQ9IjE0IiByeD0iMSI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGxpbmUgeDE9IjQuODc1IiB5MT0iMy43NSIgeDI9IjkuMzc1IiB5Mj0iMy43NSIgaWQ9Iui3r+W+hCIgc3Ryb2tlPSIjMzg3NUZGIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvbGluZT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxsaW5lIHgxPSI0Ljg3NSIgeTE9IjcuNSIgeDI9IjkuMzc1IiB5Mj0iNy41IiBpZD0i6Lev5b6EIiBzdHJva2U9IiMzODc1RkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9saW5lPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGxpbmUgeDE9IjQuODc1IiB5MT0iMTEuMjUiIHgyPSI5LjM3NSIgeTI9IjExLjI1IiBpZD0i6Lev5b6EIiBzdHJva2U9IiMzODc1RkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9saW5lPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIuNjI1LDQuNSBDMy4wMzkyMjUsNC41IDMuMzc1LDQuMTY0MjI1IDMuMzc1LDMuNzUgQzMuMzc1LDMuMzM1Nzc1IDMuMDM5MjI1LDMgMi42MjUsMyBDMi4yMTA3NzUsMyAxLjg3NSwzLjMzNTc3NSAxLjg3NSwzLjc1IEMxLjg3NSw0LjE2NDIyNSAyLjIxMDc3NSw0LjUgMi42MjUsNC41IFoiIGlkPSLot6/lvoQiIGZpbGw9IiMzODc1RkYiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yLjYyNSw4LjI1IEMzLjAzOTIyNSw4LjI1IDMuMzc1LDcuOTE0MjI1IDMuMzc1LDcuNSBDMy4zNzUsNy4wODU3NzUgMy4wMzkyMjUsNi43NSAyLjYyNSw2Ljc1IEMyLjIxMDc3NSw2Ljc1IDEuODc1LDcuMDg1Nzc1IDEuODc1LDcuNSBDMS44NzUsNy45MTQyMjUgMi4yMTA3NzUsOC4yNSAyLjYyNSw4LjI1IFoiIGlkPSLot6/lvoQiIGZpbGw9IiMzODc1RkYiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yLjYyNSwxMiBDMy4wMzkyMjUsMTIgMy4zNzUsMTEuNjY0MjI1IDMuMzc1LDExLjI1IEMzLjM3NSwxMC44MzU3NzUgMy4wMzkyMjUsMTAuNSAyLjYyNSwxMC41IEMyLjIxMDc3NSwxMC41IDEuODc1LDEwLjgzNTc3NSAxLjg3NSwxMS4yNSBDMS44NzUsMTEuNjY0MjI1IDIuMjEwNzc1LDEyIDIuNjI1LDEyIFoiIGlkPSLot6/lvoQiIGZpbGw9IiMzODc1RkYiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") no-repeat left center / 16px 16px;
  }
  .content {
    margin-bottom: 12px;
    &:last-child {
      margin-bottom: 0;
    }
    .sub-title {
      font-size: 14px;
      color: #595959;
      font-weight: 500;
      margin-bottom: 8px;
    }
    .text {
      white-space: pre-wrap;
      border: 1px solid #D9D9D9;
      border-radius: 2px;
      width: 520px;
      max-height: 280px;
      overflow: auto;
      font-size: 14px;
      color: #262626;
      line-height: 22px;
      font-weight: 400;
      padding: 8px 12px;
    }
  }
}
</style>
